npm - vforclaude2 - Versions diffs - 0.3.87 - Mend

vforclaude2 0.3.87

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

package/.claude/cowork_plugins/marketplaces/knowledge-work-plugins/productivity/skills/dashboard.html ADDED Viewed

@@ -0,0 +1,3098 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Productivity</title>
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='4' y='2' width='24' height='28' rx='4' fill='%23faf9f5' stroke='%23D97757' stroke-width='2'/%3E%3Crect x='8' y='0' width='16' height='5' rx='2.5' fill='%23D97757'/%3E%3Cpath d='M9 13l3 3 5-5' fill='none' stroke='%23D97757' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='20' y='12' width='5' height='2' rx='1' fill='%23c4c4c2'/%3E%3Crect x='9' y='20' width='10' height='2' rx='1' fill='%23c4c4c2'/%3E%3Crect x='9' y='25' width='7' height='2' rx='1' fill='%23c4c4c2'/%3E%3C/svg%3E">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    :root {
+      --bg-primary: #faf9f5;
+      --bg-secondary: #F5F4EF;
+      --bg-card: #ffffff;
+      --text-primary: #141413;
+      --text-secondary: #5c5c5a;
+      --text-muted: #8c8c8a;
+      --accent: #D97757;
+      --accent-hover: #c4684a;
+      --border: #e5e4df;
+      --border-light: #eeeee9;
+      --shadow: rgba(20, 20, 19, 0.04);
+      --shadow-hover: rgba(20, 20, 19, 0.08);
+    }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      height: 100vh;
+      padding: 20px 24px;
+      line-height: 1.5;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+    }
+    h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 12px; color: var(--text-secondary); }
+    .header-left {
+      display: flex;
+      align-items: flex-start;
+      gap: 0;
+    }
+    .view-toggle {
+      display: flex;
+      gap: 4px;
+      background: var(--bg-secondary);
+      padding: 4px;
+      border-radius: 8px;
+      margin-left: 16px;
+    }
+    .view-toggle button {
+      background: transparent;
+      border: none;
+      padding: 6px 14px;
+      font-size: 13px;
+      color: var(--text-muted);
+      border-radius: 6px;
+    }
+    .view-toggle button:hover {
+      color: var(--text-primary);
+      background: transparent;
+    }
+    .view-toggle button.active {
+      background: var(--bg-card);
+      color: var(--text-primary);
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+    .buttons { display: flex; gap: 12px; }
+    button {
+      background: var(--bg-card);
+      color: var(--text-primary);
+      border: 1px solid var(--border);
+      padding: 10px 18px;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      transition: all 0.15s ease;
+    }
+    button:hover {
+      background: var(--bg-secondary);
+      border-color: var(--text-muted);
+    }
+    button.primary {
+      background: var(--accent);
+      color: white;
+      border-color: var(--accent);
+    }
+    button.primary:hover {
+      background: var(--accent-hover);
+      border-color: var(--accent-hover);
+    }
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+    /* ===== TASKS STYLES ===== */
+    .board {
+      display: flex;
+      gap: 24px;
+      overflow-x: auto;
+      overflow-y: hidden;
+      padding-bottom: 24px;
+      flex: 1;
+      min-height: 0;
+    }
+    .column {
+      background: var(--bg-secondary);
+      border-radius: 12px;
+      min-width: 340px;
+      max-width: 340px;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      max-height: 100%;
+    }
+    .column-header {
+      padding: 16px 18px;
+      font-weight: 600;
+      font-size: 13px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-secondary);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: grab;
+    }
+    .column-header:active {
+      cursor: grabbing;
+    }
+    .column.dragging-column {
+      opacity: 0.5;
+    }
+    .column-drop-indicator {
+      width: 3px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 0 -2px;
+      min-height: 100px;
+    }
+    .column-header .count {
+      background: var(--bg-card);
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-muted);
+    }
+    .cards {
+      flex: 1;
+      overflow-y: auto;
+      padding: 0 12px 12px;
+      min-height: 100px;
+    }
+    .cards.drag-over {
+      background: rgba(217, 119, 87, 0.05);
+      border-radius: 8px;
+    }
+    .task-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      padding: 14px 16px;
+      margin-bottom: 10px;
+      cursor: grab;
+      transition: all 0.15s ease;
+      box-shadow: 0 1px 3px var(--shadow);
+      position: relative;
+    }
+    .task-card:hover {
+      box-shadow: 0 4px 12px var(--shadow-hover);
+      border-color: var(--border);
+    }
+    .task-card .add-on-hover {
+      display: none;
+    }
+    .task-card:hover .add-on-hover {
+      display: block;
+    }
+    .task-card .delete-btn {
+      display: none;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px 6px;
+      font-size: 14px;
+      line-height: 1;
+      border-radius: 4px;
+    }
+    .task-card:hover .delete-btn {
+      display: block;
+    }
+    .task-card .delete-btn:hover {
+      background: var(--bg-secondary);
+      color: var(--accent);
+    }
+    .task-card.dragging {
+      opacity: 0.5;
+      transform: rotate(2deg);
+    }
+    .card-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 1.5;
+      color: var(--text-primary);
+    }
+    .card-note {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 6px;
+      line-height: 1.4;
+      overflow-wrap: break-word;
+      word-break: break-word;
+    }
+    .card-subtasks {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--border-light);
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+    .subtask {
+      padding: 3px 0;
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+    }
+    .checkbox {
+      width: 18px;
+      height: 18px;
+      min-width: 18px;
+      min-height: 18px;
+      flex-shrink: 0;
+      border: 2px solid var(--border);
+      border-radius: 5px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      background: var(--bg-card);
+    }
+    .checkbox:hover {
+      border-color: var(--accent);
+    }
+    .checkbox.checked {
+      background: var(--accent);
+      border-color: var(--accent);
+    }
+    .checkbox.checked::after {
+      content: '';
+      width: 5px;
+      height: 9px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      margin-bottom: 2px;
+    }
+    .empty-state {
+      text-align: center;
+      padding: 80px 40px;
+      color: var(--text-muted);
+    }
+    .empty-state button {
+      font-size: 16px;
+      padding: 14px 28px;
+      background: var(--accent);
+      border: none;
+      color: white;
+    }
+    .empty-state button:hover {
+      background: var(--accent-hover);
+    }
+    .status-bar {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--text-primary);
+      color: var(--bg-primary);
+      padding: 12px 24px;
+      border-radius: 10px;
+      font-size: 13px;
+      font-weight: 500;
+      opacity: 0;
+      transition: opacity 0.2s ease;
+      box-shadow: 0 4px 20px rgba(20, 20, 19, 0.15);
+      z-index: 200;
+    }
+    .status-bar.visible { opacity: 1; }
+    .add-card {
+      padding: 12px;
+    }
+    .add-card button {
+      width: 100%;
+      background: transparent;
+      border: 2px dashed var(--border);
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .add-card button:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+      background: transparent;
+    }
+    .new-task-input {
+      width: 100%;
+      background: var(--bg-card);
+      border: 2px solid var(--accent);
+      border-radius: 8px;
+      padding: 12px;
+      color: var(--text-primary);
+      font-size: 14px;
+      font-family: inherit;
+      resize: none;
+    }
+    .new-task-input:focus {
+      outline: none;
+    }
+    .new-task-input::placeholder {
+      color: var(--text-muted);
+    }
+    /* Scrollbar styling */
+    .cards::-webkit-scrollbar,
+    .list-view::-webkit-scrollbar {
+      width: 6px;
+    }
+    .cards::-webkit-scrollbar-track,
+    .list-view::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .cards::-webkit-scrollbar-thumb,
+    .list-view::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+    .cards::-webkit-scrollbar-thumb:hover,
+    .list-view::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+    /* List View Styles */
+    .list-view {
+      max-width: 800px;
+      margin: 0 auto;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-height: 0;
+    }
+    .list-section {
+      margin-bottom: 28px;
+    }
+    .list-section.drag-over {
+      background: rgba(217, 119, 87, 0.05);
+      border-radius: 8px;
+      margin: 0 -12px 32px;
+      padding: 0 12px;
+    }
+    .list-section-header {
+      font-size: 13px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-secondary);
+      padding: 4px 0;
+      margin-bottom: 6px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .list-section-header .section-title {
+      cursor: pointer;
+    }
+    .list-section-header .section-title:hover {
+      color: var(--text-primary);
+    }
+    .list-section-header .count {
+      font-size: 12px;
+      color: var(--text-muted);
+      font-weight: 500;
+    }
+    .list-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 12px 14px;
+      margin-bottom: 6px;
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      cursor: grab;
+      position: relative;
+      border-radius: 10px;
+      transition: all 0.15s ease;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+    .list-item:active {
+      cursor: grabbing;
+    }
+    .list-item:hover {
+      box-shadow: 0 4px 12px var(--shadow-hover);
+      border-color: var(--border);
+    }
+    .list-item.dragging {
+      opacity: 0.5;
+      background: var(--bg-secondary);
+    }
+    .list-item .checkbox {
+      margin-top: 2px;
+      flex-shrink: 0;
+    }
+    .list-item-content {
+      flex: 1;
+      min-width: 0;
+    }
+    .list-item-title {
+      font-size: 15px;
+      color: var(--text-primary);
+      line-height: 1.4;
+    }
+    .list-item-title.checked {
+      color: var(--text-muted);
+      text-decoration: line-through;
+    }
+    .list-item-note {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 4px;
+      cursor: pointer;
+    }
+    .list-item-note:hover {
+      color: var(--text-secondary);
+    }
+    .list-item-note.add-note {
+      font-style: italic;
+      display: none;
+    }
+    .list-item:hover .list-item-note.add-note {
+      display: block;
+    }
+    .list-item-subtasks {
+      margin-top: 8px;
+      padding-left: 2px;
+    }
+    .list-item-subtask {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 3px 0;
+      font-size: 13px;
+      color: var(--text-secondary);
+    }
+    .list-item-subtask .checkbox {
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      margin-top: 1px;
+    }
+    .list-item-subtask span {
+      cursor: pointer;
+    }
+    .list-item-subtask span:hover {
+      color: var(--text-primary);
+    }
+    .list-item-add-subtask {
+      font-size: 13px;
+      color: var(--text-muted);
+      font-style: italic;
+      cursor: pointer;
+      padding: 3px 0;
+      padding-left: 24px;
+      display: none;
+    }
+    .list-item:hover .list-item-add-subtask {
+      display: block;
+    }
+    .list-item-add-subtask:hover {
+      color: var(--accent);
+    }
+    .list-item-section {
+      font-size: 11px;
+      color: var(--text-muted);
+      background: var(--bg-secondary);
+      padding: 2px 8px;
+      border-radius: 4px;
+      white-space: nowrap;
+    }
+    .list-item-actions {
+      display: none;
+      position: absolute;
+      top: 8px;
+      right: 8px;
+    }
+    .list-item:hover .list-item-actions {
+      display: flex;
+      gap: 4px;
+    }
+    .list-item-actions button {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      cursor: pointer;
+      padding: 4px 6px;
+      font-size: 14px;
+      line-height: 1;
+      border-radius: 4px;
+    }
+    .list-item-actions button:hover {
+      background: var(--bg-card);
+      color: var(--accent);
+    }
+    .list-drop-indicator {
+      height: 3px;
+      background: var(--accent);
+      border-radius: 2px;
+      margin: 2px -12px;
+    }
+    .list-add-section {
+      margin-top: 16px;
+      padding: 16px;
+      border: 2px dashed var(--border);
+      border-radius: 8px;
+      text-align: center;
+      cursor: pointer;
+      color: var(--text-muted);
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.15s ease;
+    }
+    .list-add-section:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+    .quick-add {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+    }
+    .quick-add-input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      font-size: 15px;
+      color: var(--text-primary);
+      font-family: inherit;
+      outline: none;
+    }
+    .quick-add-input::placeholder {
+      color: var(--text-muted);
+    }
+    .quick-add-section {
+      font-size: 12px;
+      color: var(--text-muted);
+      background: var(--bg-secondary);
+      padding: 4px 10px;
+      border-radius: 6px;
+      cursor: pointer;
+      border: 1px solid var(--border);
+    }
+    .quick-add-section:hover {
+      border-color: var(--accent);
+    }
+    .section-picker {
+      position: absolute;
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      box-shadow: 0 4px 20px var(--shadow-hover);
+      padding: 4px;
+      z-index: 100;
+    }
+    .section-picker button {
+      display: block;
+      width: 100%;
+      text-align: left;
+      padding: 8px 12px;
+      font-size: 13px;
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+    }
+    .section-picker button:hover {
+      background: var(--bg-secondary);
+    }
+    /* ===== MEMORY STYLES ===== */
+    .memory-tabs {
+      display: flex;
+      gap: 4px;
+      margin-bottom: 12px;
+      flex-wrap: wrap;
+      background: var(--bg-secondary);
+      padding: 4px;
+      border-radius: 8px;
+      flex-shrink: 0;
+    }
+    .memory-tab {
+      background: transparent;
+      color: var(--text-muted);
+      padding: 8px 16px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.15s ease;
+      text-transform: capitalize;
+    }
+    .memory-tab:hover { color: var(--text-primary); }
+    .memory-tab.active {
+      color: var(--text-primary);
+      background: var(--bg-card);
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+    .memory-tab .count {
+      background: var(--bg-secondary);
+      padding: 2px 8px;
+      border-radius: 10px;
+      font-size: 11px;
+      margin-left: 6px;
+      color: var(--text-muted);
+    }
+    .memory-tab.active .count {
+      background: var(--border-light);
+    }
+    .memory-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+      gap: 16px;
+    }
+    .memory-flat-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+    .memory-flat-table th {
+      text-align: left;
+      padding: 10px 16px;
+      font-weight: 500;
+      color: var(--text-muted);
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.03em;
+    }
+    .memory-flat-table td {
+      padding: 9px 16px;
+      border-bottom: 1px solid var(--border-light);
+      color: var(--text-primary);
+      line-height: 1.4;
+    }
+    .memory-flat-table td:first-child {
+      color: var(--text-muted);
+      font-weight: 500;
+      white-space: nowrap;
+      width: 120px;
+    }
+    .memory-flat-table tr:last-child td {
+      border-bottom: none;
+    }
+    .memory-flat-table tr:hover td {
+      background: var(--bg-secondary);
+    }
+    .memory-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      padding: 16px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+    .memory-card:hover {
+      border-color: var(--accent);
+      box-shadow: 0 4px 12px var(--shadow-hover);
+    }
+    .memory-card-title {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-primary);
+    }
+    .memory-card-meta {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-bottom: 8px;
+    }
+    .memory-card-preview {
+      font-size: 13px;
+      color: var(--text-secondary);
+      line-height: 1.5;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 4;
+      -webkit-box-orient: vertical;
+    }
+    .memory-card-fields {
+      margin-top: 10px;
+      font-size: 12px;
+    }
+    .memory-card-field {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 4px;
+    }
+    .memory-card-field-label {
+      color: var(--text-muted);
+      min-width: 80px;
+    }
+    .memory-card-field-value {
+      color: var(--text-secondary);
+    }
+    .file-card {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      margin-bottom: 16px;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+    .file-card-header {
+      padding: 16px;
+      border-bottom: 1px solid var(--border-light);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+    }
+    .file-card-header:hover {
+      background: var(--bg-secondary);
+    }
+    .file-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .file-card-content {
+      padding: 16px;
+      font-size: 13px;
+      line-height: 1.6;
+      white-space: pre-wrap;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      overflow-y: auto;
+      display: none;
+      color: var(--text-secondary);
+    }
+    .file-card-content.expanded {
+      display: block;
+    }
+    .stats {
+      display: flex;
+      gap: 16px;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+    }
+    .stat {
+      background: var(--bg-card);
+      border: 1px solid var(--border-light);
+      border-radius: 10px;
+      padding: 16px 24px;
+      min-width: 100px;
+      box-shadow: 0 1px 3px var(--shadow);
+    }
+    .stat-value {
+      font-size: 28px;
+      font-weight: 600;
+      color: var(--accent);
+    }
+    .stat-label {
+      font-size: 12px;
+      color: var(--text-muted);
+      text-transform: capitalize;
+      margin-top: 4px;
+    }
+    .search-box {
+      background: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 10px 16px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+    .search-box input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      color: var(--text-primary);
+      font-size: 14px;
+      font-family: inherit;
+      outline: none;
+    }
+    .search-box input::placeholder {
+      color: var(--text-muted);
+    }
+    .add-btn {
+      background: transparent;
+      border: 2px dashed var(--border);
+      color: var(--text-muted);
+      padding: 40px;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    .add-btn:hover {
+      border-color: var(--accent);
+      color: var(--accent);
+    }
+    .markdown-content {
+      line-height: 1.6;
+      color: var(--text-secondary);
+    }
+    .markdown-content h1 { font-size: 1.4em; margin: 16px 0 8px; color: var(--text-primary); }
+    .markdown-content h2 { font-size: 1.2em; margin: 14px 0 6px; color: var(--text-primary); }
+    .markdown-content h3 { font-size: 1.1em; margin: 12px 0 4px; color: var(--text-secondary); }
+    .markdown-content p { margin: 8px 0; }
+    .markdown-content ul, .markdown-content ol { margin: 8px 0 8px 20px; }
+    .markdown-content li { margin: 4px 0; }
+    .markdown-content code {
+      background: var(--bg-secondary);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      color: var(--text-primary);
+    }
+    .markdown-content pre {
+      background: var(--bg-secondary);
+      padding: 12px;
+      border-radius: 8px;
+      overflow-x: auto;
+      margin: 8px 0;
+      border: 1px solid var(--border-light);
+    }
+    .markdown-content table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 8px 0;
+      font-size: 13px;
+    }
+    .markdown-content th, .markdown-content td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--border-light);
+    }
+    .markdown-content th {
+      background: var(--bg-secondary);
+      font-weight: 600;
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--text-secondary);
+    }
+    /* Modal */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(20, 20, 19, 0.5);
+      z-index: 100;
+      align-items: center;
+      justify-content: center;
+    }
+    .modal-overlay.visible {
+      display: flex;
+    }
+    .modal {
+      background: var(--bg-card);
+      border-radius: 12px;
+      width: 90%;
+      max-width: 800px;
+      max-height: 85vh;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      box-shadow: 0 20px 60px rgba(20, 20, 19, 0.2);
+    }
+    .modal-header {
+      padding: 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .modal-header h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--text-primary);
+    }
+    .modal-close {
+      background: transparent;
+      border: none;
+      color: var(--text-muted);
+      font-size: 24px;
+      cursor: pointer;
+      padding: 0;
+      line-height: 1;
+    }
+    .modal-close:hover { color: var(--text-primary); }
+    .modal-body {
+      padding: 20px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    .modal-footer {
+      padding: 16px 20px;
+      border-top: 1px solid var(--border);
+      display: flex;
+      justify-content: flex-end;
+      gap: 10px;
+    }
+    .form-group {
+      margin-bottom: 16px;
+    }
+    .form-group label {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      margin-bottom: 6px;
+    }
+    .form-group textarea {
+      width: 100%;
+      background: var(--bg-secondary);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 12px;
+      color: var(--text-primary);
+      font-size: 13px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+      line-height: 1.5;
+      min-height: 300px;
+      resize: vertical;
+    }
+    .form-group textarea:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+    /* Tab panel containers */
+    .tab-panel {
+      display: none;
+      flex: 1;
+      min-height: 0;
+      flex-direction: column;
+    }
+    .tab-panel.active {
+      display: flex;
+    }
+    /* Memory panel scrollable area */
+    .memory-content-area {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+    }
+    .memory-content-area::-webkit-scrollbar {
+      width: 6px;
+    }
+    .memory-content-area::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .memory-content-area::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+    .memory-content-area::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+    .file-card-content::-webkit-scrollbar,
+    .modal-body::-webkit-scrollbar {
+      width: 6px;
+    }
+    .file-card-content::-webkit-scrollbar-track,
+    .modal-body::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    .file-card-content::-webkit-scrollbar-thumb,
+    .modal-body::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+    .file-card-content::-webkit-scrollbar-thumb:hover,
+    .modal-body::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+    /* File path display */
+    .file-path {
+      font-size: 13px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="header-left">
+      <svg width="28" height="28" viewBox="0 0 32 32" style="margin-right: 12px; flex-shrink: 0;">
+        <rect x="4" y="2" width="24" height="28" rx="4" fill="#faf9f5" stroke="#D97757" stroke-width="2"/>
+        <rect x="8" y="0" width="16" height="5" rx="2.5" fill="#D97757"/>
+        <path d="M9 13l3 3 5-5" fill="none" stroke="#D97757" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+        <rect x="20" y="12" width="5" height="2" rx="1" fill="#c4c4c2"/>
+        <rect x="9" y="20" width="10" height="2" rx="1" fill="#c4c4c2"/>
+        <rect x="9" y="25" width="7" height="2" rx="1" fill="#c4c4c2"/>
+      </svg>
+      <div>
+        <h1>Productivity</h1>
+        <div id="filePath" class="file-path"></div>
+      </div>
+      <div class="view-toggle" id="mainTabToggle">
+        <button id="tasksTabBtn" class="active">Tasks</button>
+        <button id="memoryTabBtn">Memory</button>
+      </div>
+      <div class="view-toggle" id="taskViewToggle">
+        <button id="boardViewBtn" class="active">Board</button>
+        <button id="listViewBtn">List</button>
+      </div>
+    </div>
+    <div class="buttons">
+      <button id="openTaskBtn">Select File</button>
+      <button id="openMemoryBtn" style="display: none;">Open Folder</button>
+      <button id="saveBtn" class="primary" disabled style="display: none;">Save</button>
+    </div>
+  </header>
+  <!-- TASKS TAB PANEL -->
+  <div class="tab-panel active" id="tasksPanel">
+    <div class="list-view" id="listView" style="display: none;"></div>
+    <div class="board" id="board">
+      <div class="empty-state" id="boardEmptyState" style="width: 100%;">
+        <p style="margin-bottom: 24px; font-size: 18px; font-weight: 600; color: var(--text-primary);">Select your TASKS.md file</p>
+        <button id="openBtnLarge">Select TASKS.md</button>
+      </div>
+    </div>
+  </div>
+  <!-- MEMORY TAB PANEL -->
+  <div class="tab-panel" id="memoryPanel">
+    <div id="memoryEmptyState" class="empty-state">
+      <p style="margin-bottom: 24px; font-size: 18px; font-weight: 600; color: var(--text-primary);">Select your project folder</p>
+      <button id="openMemoryBtnLarge">Select Folder</button>
+    </div>
+    <div id="memoryMainContent" style="display: none; flex-direction: column; min-height: 0; flex: 1;">
+      <div class="memory-tabs" id="memoryTabsContainer"></div>
+      <div class="memory-content-area">
+        <div id="memoryContentContainer"></div>
+      </div>
+    </div>
+  </div>
+  <!-- MODAL (shared for memory) -->
+  <div class="modal-overlay" id="modalOverlay">
+    <div class="modal">
+      <div class="modal-header">
+        <h3 id="modalTitle">Edit</h3>
+        <button class="modal-close" id="modalClose">&times;</button>
+      </div>
+      <div class="modal-body" id="modalBody"></div>
+      <div class="modal-footer">
+        <button id="modalCancel">Cancel</button>
+        <button id="modalSave" class="primary">Save</button>
+      </div>
+    </div>
+  </div>
+  <div class="status-bar" id="status"></div>
+  <script>
+    // ===== SHARED STATE =====
+    let activeMainTab = 'tasks'; // 'tasks' or 'memory'
+    const statusEl = document.getElementById('status');
+    const filePathEl = document.getElementById('filePath');
+    function showStatus(msg) {
+      statusEl.textContent = msg;
+      statusEl.classList.add('visible');
+      setTimeout(() => statusEl.classList.remove('visible'), 2000);
+    }
+    // ===== MAIN TAB SWITCHING =====
+    const tasksTabBtn = document.getElementById('tasksTabBtn');
+    const memoryTabBtn = document.getElementById('memoryTabBtn');
+    const tasksPanel = document.getElementById('tasksPanel');
+    const memoryPanel = document.getElementById('memoryPanel');
+    const taskViewToggle = document.getElementById('taskViewToggle');
+    const openTaskBtn = document.getElementById('openTaskBtn');
+    const openMemoryBtn = document.getElementById('openMemoryBtn');
+    const saveBtn = document.getElementById('saveBtn');
+    function switchMainTab(tab) {
+      activeMainTab = tab;
+      tasksTabBtn.classList.toggle('active', tab === 'tasks');
+      memoryTabBtn.classList.toggle('active', tab === 'memory');
+      tasksPanel.classList.toggle('active', tab === 'tasks');
+      memoryPanel.classList.toggle('active', tab === 'memory');
+      // Show/hide view toggle for tasks
+      taskViewToggle.style.display = tab === 'tasks' ? 'flex' : 'none';
+      // Show/hide appropriate buttons
+      openTaskBtn.style.display = tab === 'tasks' ? 'inline-flex' : 'none';
+      openMemoryBtn.style.display = tab === 'memory' ? 'inline-flex' : 'none';
+      saveBtn.style.display = tab === 'tasks' ? 'inline-flex' : 'none';
+      // Update file path display
+      if (tab === 'tasks') {
+        filePathEl.textContent = taskFileHandle ? taskFileName : '';
+      } else {
+        filePathEl.textContent = memoryDirHandle ? memoryDirHandle.name : '';
+      }
+    }
+    tasksTabBtn.addEventListener('click', () => switchMainTab('tasks'));
+    memoryTabBtn.addEventListener('click', () => switchMainTab('memory'));
+    // ============================================================
+    // ===== TASKS FUNCTIONALITY =====
+    // ============================================================
+    let taskFileHandle = null;
+    let taskFileName = '';
+    let sections = [];
+    let tasks = {};
+    let hasChanges = false;
+    let currentView = 'board';
+    let quickAddSection = null;
+    const board = document.getElementById('board');
+    const listView = document.getElementById('listView');
+    const listViewBtn = document.getElementById('listViewBtn');
+    const boardViewBtn = document.getElementById('boardViewBtn');
+    function taskSectionId(name) {
+      return name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+    }
+    function parseTaskMarkdown(content) {
+      const resultSections = [];
+      const resultTasks = {};
+      let currentSection = null;
+      let currentSectionId = null;
+      const lines = content.split('\n');
+      let currentTask = null;
+      for (const line of lines) {
+        const headerMatch = line.match(/^## \*{0,2}(.+?)\*{0,2}$/);
+        if (headerMatch) {
+          if (currentTask && currentSectionId) {
+            resultTasks[currentSectionId].push(currentTask);
+            currentTask = null;
+          }
+          const sectionName = headerMatch[1].trim();
+          currentSectionId = taskSectionId(sectionName);
+          currentSection = sectionName;
+          if (!resultTasks[currentSectionId]) {
+            resultSections.push({ id: currentSectionId, name: sectionName });
+            resultTasks[currentSectionId] = [];
+          }
+        } else if (currentSectionId && line.match(/^- \[[ xX]\]/)) {
+          if (currentTask) {
+            resultTasks[currentSectionId].push(currentTask);
+          }
+          const checked = line.match(/\[[xX]\]/) !== null;
+          let text = line.replace(/^- \[[ xX]\]\s*/, '');
+          let title = text;
+          let note = '';
+          const boldMatch = text.match(/^\*\*(.+?)\*\*(.*)$/);
+          if (boldMatch) {
+            title = boldMatch[1];
+            note = boldMatch[2].replace(/^\s*-\s*/, '').trim();
+          }
+          currentTask = {
+            id: Date.now() + Math.random(),
+            title,
+            note,
+            checked,
+            subtasks: [],
+            section: currentSectionId
+          };
+        } else if (currentTask && line.match(/^\s+- \[[ xX]\]/)) {
+          const checked = line.match(/\[[xX]\]/) !== null;
+          const text = line.replace(/^\s+- \[[ xX]\]\s*/, '');
+          currentTask.subtasks.push({ text, checked });
+        }
+      }
+      if (currentTask && currentSectionId) {
+        resultTasks[currentSectionId].push(currentTask);
+      }
+      return { sections: resultSections, tasks: resultTasks };
+    }
+    function toMarkdown() {
+      let md = '# Tasks\n';
+      sections.forEach((section, idx) => {
+        md += `\n## ${section.name}\n`;
+        const sectionTasks = tasks[section.id] || [];
+        sectionTasks.forEach(t => {
+          const checkbox = t.checked ? '[x]' : '[ ]';
+          const note = t.note ? ` - ${t.note}` : '';
+          md += `- ${checkbox} **${t.title}**${note}\n`;
+          t.subtasks.forEach(st => {
+            const stCheckbox = st.checked ? '[x]' : '[ ]';
+            md += `  - ${stCheckbox} ${st.text}\n`;
+          });
+        });
+      });
+      return md.trimEnd() + '\n';
+    }
+    function createCard(task) {
+      const card = document.createElement('div');
+      card.className = 'task-card';
+      card.draggable = true;
+      card.dataset.id = task.id;
+      let html = `
+        <div style="display: flex; align-items: flex-start; gap: 12px;">
+          <button class="delete-btn" data-action="delete" title="Delete task">&times;</button>
+          <span class="checkbox ${task.checked ? 'checked' : ''}" data-action="toggle"></span>
+          <div class="card-title" data-action="edit-title">${task.title}</div>
+        </div>
+      `;
+      if (task.note) {
+        html += `<div class="card-note" data-action="edit-note" style="cursor: pointer; margin-left: 30px;">${task.note}</div>`;
+      } else {
+        html += `<div class="card-note add-on-hover" data-action="edit-note" style="cursor: pointer; margin-left: 30px; font-style: italic;">+ Add note</div>`;
+      }
+      if (task.subtasks.length > 0) {
+        html += '<div class="card-subtasks" style="margin-left: 30px;">';
+        task.subtasks.forEach((st, idx) => {
+          html += `<div class="subtask">
+            <span class="checkbox ${st.checked ? 'checked' : ''}" data-action="toggle-sub" data-idx="${idx}" style="width: 16px; height: 16px; min-width: 16px; min-height: 16px;"></span>
+            <span data-action="edit-subtask" data-idx="${idx}" style="cursor: pointer;">${st.text}</span>
+          </div>`;
+        });
+        html += `<div class="subtask add-on-hover" data-action="add-subtask" style="color: var(--text-muted); cursor: pointer; font-style: italic; padding-left: 24px;">+ Add subtask</div>`;
+        html += '</div>';
+      } else {
+        html += `<div class="card-subtasks add-on-hover" style="margin-left: 30px;">
+          <div class="subtask" data-action="add-subtask" style="color: var(--text-muted); cursor: pointer; font-style: italic;">+ Add subtask</div>
+        </div>`;
+      }
+      card.innerHTML = html;
+      card.addEventListener('dragstart', (e) => {
+        card.classList.add('dragging');
+        e.dataTransfer.setData('text/plain', task.id);
+      });
+      card.addEventListener('dragend', () => {
+        card.classList.remove('dragging');
+      });
+      card.addEventListener('click', (e) => {
+        const action = e.target.dataset.action;
+        if (action === 'toggle') {
+          task.checked = !task.checked;
+          markChanged();
+          renderTasks();
+        } else if (action === 'toggle-sub') {
+          const idx = parseInt(e.target.dataset.idx);
+          task.subtasks[idx].checked = !task.subtasks[idx].checked;
+          markChanged();
+          renderTasks();
+        } else if (action === 'edit-title') {
+          startEditingTitle(e.target, task);
+        } else if (action === 'edit-note') {
+          startEditingNote(e.target, task);
+        } else if (action === 'edit-subtask') {
+          const idx = parseInt(e.target.dataset.idx);
+          startEditingSubtask(e.target, task, idx);
+        } else if (action === 'add-subtask') {
+          startAddingSubtask(e.target, task);
+        } else if (action === 'delete') {
+          deleteTask(task);
+        }
+      });
+      return card;
+    }
+    function startEditingTitle(titleEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.title;
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 6px 10px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;';
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newTitle = input.value.trim();
+        if (newTitle && newTitle !== task.title) {
+          task.title = newTitle;
+          markChanged();
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startEditingNote(noteEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.note || '';
+      input.placeholder = 'Add a note...';
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+      noteEl.replaceWith(input);
+      input.focus();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        task.note = input.value.trim();
+        markChanged();
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startEditingSubtask(subtaskEl, task, idx) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.subtasks[idx].text;
+      input.style.cssText = 'width: calc(100% - 30px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+      subtaskEl.replaceWith(input);
+      input.focus();
+      input.select();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newText = input.value.trim();
+        if (newText) { task.subtasks[idx].text = newText; }
+        else { task.subtasks.splice(idx, 1); }
+        markChanged();
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startAddingSubtask(el, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'New subtask...';
+      input.style.cssText = 'width: calc(100% - 10px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+      el.replaceWith(input);
+      input.focus();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const text = input.value.trim();
+        if (text) { task.subtasks.push({ text, checked: false }); markChanged(); }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startEditingColumnTitle(titleEl, colId) {
+      const section = sections.find(s => s.id === colId);
+      if (!section) return;
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = section.name;
+      input.style.cssText = 'width: 180px; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit; outline: none;';
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newName = input.value.trim();
+        if (newName && newName !== section.name) {
+          const oldId = section.id;
+          section.name = newName;
+          const newId = taskSectionId(newName);
+          if (newId !== oldId) {
+            tasks[newId] = tasks[oldId] || [];
+            delete tasks[oldId];
+            tasks[newId].forEach(t => t.section = newId);
+            section.id = newId;
+          }
+          markChanged();
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function createColumn(id, title, items) {
+      const col = document.createElement('div');
+      col.className = 'column';
+      col.innerHTML = `
+        <div class="column-header">
+          <span class="column-title" data-section-id="${id}" style="cursor: pointer;">${title}</span>
+          <span class="count">${items.length}</span>
+        </div>
+        <div class="cards" data-column="${id}"></div>
+        <div class="add-card">
+          <button data-add="${id}">+ Add task</button>
+        </div>
+      `;
+      col.querySelector('.column-title').addEventListener('click', (e) => {
+        if (!col.dragging) { startEditingColumnTitle(e.target, id); }
+      });
+      const header = col.querySelector('.column-header');
+      header.draggable = true;
+      header.addEventListener('dragstart', (e) => {
+        e.stopPropagation();
+        col.classList.add('dragging-column');
+        e.dataTransfer.setData('text/column', id);
+        e.dataTransfer.effectAllowed = 'move';
+      });
+      header.addEventListener('dragend', () => {
+        col.classList.remove('dragging-column');
+        board.querySelectorAll('.column-drop-indicator').forEach(el => el.remove());
+      });
+      col.addEventListener('dragover', (e) => {
+        if (e.dataTransfer.types.includes('text/column')) {
+          e.preventDefault();
+          e.stopPropagation();
+          board.querySelectorAll('.column-drop-indicator').forEach(el => el.remove());
+          const indicator = document.createElement('div');
+          indicator.className = 'column-drop-indicator';
+          const rect = col.getBoundingClientRect();
+          if (e.clientX < rect.left + rect.width / 2) { col.before(indicator); }
+          else { col.after(indicator); }
+        }
+      });
+      col.addEventListener('drop', (e) => {
+        if (e.dataTransfer.types.includes('text/column')) {
+          e.preventDefault();
+          e.stopPropagation();
+          const fromId = e.dataTransfer.getData('text/column');
+          const toId = id;
+          if (fromId !== toId) {
+            const rect = col.getBoundingClientRect();
+            const insertBefore = e.clientX < rect.left + rect.width / 2;
+            moveSection(fromId, toId, insertBefore);
+          }
+          board.querySelectorAll('.column-drop-indicator').forEach(el => el.remove());
+        }
+      });
+      const cardsContainer = col.querySelector('.cards');
+      items.forEach(task => { cardsContainer.appendChild(createCard(task)); });
+      const getDropPosition = (e) => {
+        const allCards = [...cardsContainer.querySelectorAll('.task-card')];
+        const visibleCards = allCards.filter(c => !c.classList.contains('dragging'));
+        let insertBeforeCard = null;
+        let dropIndex = visibleCards.length;
+        for (let i = 0; i < visibleCards.length; i++) {
+          const rect = visibleCards[i].getBoundingClientRect();
+          if (e.clientY < rect.top + rect.height / 2) {
+            insertBeforeCard = visibleCards[i];
+            dropIndex = i;
+            break;
+          }
+        }
+        return { insertBeforeCard, dropIndex };
+      };
+      const showDropIndicator = (e) => {
+        col.querySelectorAll('.drop-indicator').forEach(el => el.remove());
+        const { insertBeforeCard } = getDropPosition(e);
+        const indicator = document.createElement('div');
+        indicator.className = 'drop-indicator';
+        indicator.style.cssText = 'height: 3px; background: var(--accent); border-radius: 2px; margin: 5px 0;';
+        if (insertBeforeCard) { cardsContainer.insertBefore(indicator, insertBeforeCard); }
+        else { cardsContainer.appendChild(indicator); }
+      };
+      col.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        cardsContainer.classList.add('drag-over');
+        showDropIndicator(e);
+      });
+      col.addEventListener('dragleave', (e) => {
+        if (!col.contains(e.relatedTarget)) {
+          cardsContainer.classList.remove('drag-over');
+          col.querySelectorAll('.drop-indicator').forEach(el => el.remove());
+        }
+      });
+      col.addEventListener('drop', (e) => {
+        e.preventDefault();
+        cardsContainer.classList.remove('drag-over');
+        col.querySelectorAll('.drop-indicator').forEach(el => el.remove());
+        const taskId = parseFloat(e.dataTransfer.getData('text/plain'));
+        const { dropIndex } = getDropPosition(e);
+        moveTask(taskId, id, dropIndex);
+      });
+      col.querySelector(`[data-add="${id}"]`).addEventListener('click', () => {
+        addNewTask(id, col.querySelector('.cards'));
+      });
+      return col;
+    }
+    function addNewTask(sectionId, container) {
+      const existing = container.querySelector('.new-task-input');
+      if (existing) return;
+      const input = document.createElement('textarea');
+      input.className = 'new-task-input';
+      input.placeholder = 'What needs to be done?';
+      input.rows = 2;
+      container.appendChild(input);
+      input.focus();
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+          e.preventDefault();
+          const title = input.value.trim();
+          if (title) {
+            if (!tasks[sectionId]) tasks[sectionId] = [];
+            tasks[sectionId].push({
+              id: Date.now() + Math.random(),
+              title,
+              note: '',
+              checked: false,
+              subtasks: [],
+              section: sectionId
+            });
+            markChanged();
+            renderTasks();
+          } else { input.remove(); }
+        } else if (e.key === 'Escape') { input.remove(); }
+      });
+      input.addEventListener('blur', () => { setTimeout(() => input.remove(), 100); });
+    }
+    function moveSection(fromId, toId, insertBefore) {
+      const fromIdx = sections.findIndex(s => s.id === fromId);
+      const toIdx = sections.findIndex(s => s.id === toId);
+      if (fromIdx === -1 || toIdx === -1) return;
+      const [section] = sections.splice(fromIdx, 1);
+      let newIdx = sections.findIndex(s => s.id === toId);
+      if (!insertBefore) newIdx++;
+      sections.splice(newIdx, 0, section);
+      markChanged();
+      renderTasks();
+    }
+    function moveTask(taskId, toSectionId, dropIndex = -1) {
+      let task = null;
+      for (const section of sections) {
+        const sectionTasks = tasks[section.id] || [];
+        const idx = sectionTasks.findIndex(t => t.id === taskId);
+        if (idx !== -1) {
+          task = sectionTasks.splice(idx, 1)[0];
+          break;
+        }
+      }
+      if (!task) return;
+      task.section = toSectionId;
+      if (!tasks[toSectionId]) tasks[toSectionId] = [];
+      if (dropIndex >= 0 && dropIndex <= tasks[toSectionId].length) {
+        tasks[toSectionId].splice(dropIndex, 0, task);
+      } else {
+        tasks[toSectionId].push(task);
+      }
+      markChanged();
+      renderTasks();
+    }
+    function deleteTask(task) {
+      if (!confirm(`Delete "${task.title}"?`)) return;
+      for (const section of sections) {
+        const sectionTasks = tasks[section.id] || [];
+        const idx = sectionTasks.findIndex(t => t.id === task.id);
+        if (idx !== -1) { sectionTasks.splice(idx, 1); break; }
+      }
+      markChanged();
+      renderTasks();
+    }
+    let saveTimeout = null;
+    let lastModified = 0;
+    let watchInterval = null;
+    let isSaving = false;
+    function markChanged() {
+      hasChanges = true;
+      saveBtn.disabled = false;
+      if (saveTimeout) clearTimeout(saveTimeout);
+      saveTimeout = setTimeout(autoSave, 500);
+    }
+    async function autoSave() {
+      if (!taskFileHandle || !hasChanges || isSaving) return;
+      isSaving = true;
+      try {
+        const writable = await taskFileHandle.createWritable();
+        const content = toMarkdown();
+        await writable.write(content);
+        await writable.close();
+        const file = await taskFileHandle.getFile();
+        lastModified = file.lastModified;
+        hasChanges = false;
+        saveBtn.disabled = true;
+        showStatus('Saved');
+      } catch (e) {
+        showStatus('Save failed: ' + e.message);
+      }
+      isSaving = false;
+    }
+    async function checkForExternalChanges() {
+      if (!taskFileHandle || hasChanges || isSaving) return;
+      try {
+        const file = await taskFileHandle.getFile();
+        if (file.lastModified > lastModified) {
+          lastModified = file.lastModified;
+          const content = await file.text();
+          const result = parseTaskMarkdown(content);
+          sections = result.sections;
+          tasks = result.tasks;
+          renderTasks();
+          showStatus('Reloaded');
+        }
+      } catch (e) { console.log('Watch error:', e); }
+    }
+    function startWatching() {
+      if (watchInterval) clearInterval(watchInterval);
+      watchInterval = setInterval(checkForExternalChanges, 1000);
+    }
+    function stopWatching() {
+      if (watchInterval) { clearInterval(watchInterval); watchInterval = null; }
+    }
+    function renderTasks() {
+      if (currentView === 'board') { renderBoard(); }
+      else { renderList(); }
+    }
+    function renderBoard() {
+      board.innerHTML = '';
+      sections.forEach(section => {
+        const sectionTasks = tasks[section.id] || [];
+        board.appendChild(createColumn(section.id, section.name, sectionTasks));
+      });
+      const addSectionBtn = document.createElement('div');
+      addSectionBtn.className = 'column';
+      addSectionBtn.style.cssText = 'background: transparent; border: 2px dashed var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; min-height: 120px;';
+      addSectionBtn.innerHTML = '<span style="color: var(--text-muted); font-size: 14px; font-weight: 500;">+ Add Section</span>';
+      addSectionBtn.addEventListener('click', () => startAddingSection(addSectionBtn));
+      board.appendChild(addSectionBtn);
+    }
+    function renderList() {
+      listView.innerHTML = '';
+      if (!quickAddSection && sections.length > 0) {
+        quickAddSection = sections[0].id;
+      }
+      // Quick add at top
+      const quickAdd = document.createElement('div');
+      quickAdd.className = 'quick-add';
+      quickAdd.style.cssText = 'border-bottom: 2px solid var(--border); margin-bottom: 24px; padding-bottom: 16px;';
+      const sectionName = sections.find(s => s.id === quickAddSection)?.name || 'Select section';
+      quickAdd.innerHTML = `
+        <span class="checkbox" style="opacity: 0.3;"></span>
+        <input type="text" class="quick-add-input" placeholder="Add a task..." id="quickAddInput">
+        <span class="quick-add-section" id="quickAddSectionBtn">${sectionName}</span>
+      `;
+      listView.appendChild(quickAdd);
+      const quickInput = document.getElementById('quickAddInput');
+      const sectionBtn = document.getElementById('quickAddSectionBtn');
+      quickInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && quickInput.value.trim()) {
+          const title = quickInput.value.trim();
+          if (!tasks[quickAddSection]) tasks[quickAddSection] = [];
+          tasks[quickAddSection].unshift({
+            id: Date.now() + Math.random(),
+            title,
+            note: '',
+            checked: false,
+            subtasks: [],
+            section: quickAddSection
+          });
+          quickInput.value = '';
+          markChanged();
+          renderTasks();
+          setTimeout(() => document.getElementById('quickAddInput')?.focus(), 10);
+        }
+      });
+      sectionBtn.addEventListener('click', (e) => { showSectionPicker(e.target); });
+      // Render each section
+      sections.forEach(section => {
+        const sectionTasks = tasks[section.id] || [];
+        const sectionEl = document.createElement('div');
+        sectionEl.className = 'list-section';
+        sectionEl.dataset.sectionId = section.id;
+        const header = document.createElement('div');
+        header.className = 'list-section-header';
+        header.innerHTML = `
+          <span class="section-title" data-section-id="${section.id}">${section.name}</span>
+          <span class="count">${sectionTasks.length}</span>
+        `;
+        header.querySelector('.section-title').addEventListener('click', (e) => {
+          startEditingListSectionTitle(e.target, section);
+        });
+        sectionEl.appendChild(header);
+        const tasksContainer = document.createElement('div');
+        tasksContainer.className = 'list-tasks-container';
+        tasksContainer.dataset.sectionId = section.id;
+        sectionTasks.forEach(task => {
+          tasksContainer.appendChild(createListItem(task, section));
+        });
+        sectionEl.appendChild(tasksContainer);
+        // Drag-and-drop handlers for section
+        const getDropPosition = (e, container) => {
+          const items = [...container.querySelectorAll('.list-item:not(.dragging)')];
+          let insertBeforeEl = null;
+          let dropIndex = items.length;
+          for (let i = 0; i < items.length; i++) {
+            const rect = items[i].getBoundingClientRect();
+            if (e.clientY < rect.top + rect.height / 2) {
+              insertBeforeEl = items[i];
+              dropIndex = i;
+              break;
+            }
+          }
+          return { insertBeforeEl, dropIndex };
+        };
+        const showDropIndicator = (e) => {
+          tasksContainer.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+          const { insertBeforeEl } = getDropPosition(e, tasksContainer);
+          const indicator = document.createElement('div');
+          indicator.className = 'list-drop-indicator';
+          if (insertBeforeEl) { tasksContainer.insertBefore(indicator, insertBeforeEl); }
+          else { tasksContainer.appendChild(indicator); }
+        };
+        sectionEl.addEventListener('dragover', (e) => {
+          e.preventDefault();
+          sectionEl.classList.add('drag-over');
+          showDropIndicator(e);
+        });
+        sectionEl.addEventListener('dragleave', (e) => {
+          if (!sectionEl.contains(e.relatedTarget)) {
+            sectionEl.classList.remove('drag-over');
+            tasksContainer.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+          }
+        });
+        sectionEl.addEventListener('drop', (e) => {
+          e.preventDefault();
+          sectionEl.classList.remove('drag-over');
+          tasksContainer.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+          const taskId = parseFloat(e.dataTransfer.getData('text/plain'));
+          if (!taskId) return;
+          const { dropIndex } = getDropPosition(e, tasksContainer);
+          moveTask(taskId, section.id, dropIndex);
+        });
+        listView.appendChild(sectionEl);
+      });
+      // Add Section button
+      const addSectionBtn = document.createElement('div');
+      addSectionBtn.className = 'list-add-section';
+      addSectionBtn.textContent = '+ Add Section';
+      addSectionBtn.addEventListener('click', () => { startAddingListSection(addSectionBtn); });
+      listView.appendChild(addSectionBtn);
+    }
+    function startEditingListSectionTitle(titleEl, section) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = section.name;
+      input.style.cssText = 'width: 200px; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-family: inherit; outline: none;';
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newName = input.value.trim();
+        if (newName && newName !== section.name) {
+          const oldId = section.id;
+          section.name = newName;
+          const newId = taskSectionId(newName);
+          if (newId !== oldId) {
+            tasks[newId] = tasks[oldId] || [];
+            delete tasks[oldId];
+            tasks[newId].forEach(t => t.section = newId);
+            section.id = newId;
+          }
+          markChanged();
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startAddingListSection(btn) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'Section name...';
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 8px; padding: 12px 16px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none; text-align: left;';
+      btn.innerHTML = '';
+      btn.style.border = '2px solid var(--accent)';
+      btn.style.cursor = 'default';
+      btn.appendChild(input);
+      input.focus();
+      let saved = false;
+      const saveSection = () => {
+        if (saved) return;
+        saved = true;
+        const name = input.value.trim();
+        if (name) {
+          const id = taskSectionId(name);
+          if (!tasks[id]) {
+            sections.push({ id, name });
+            tasks[id] = [];
+            markChanged();
+          }
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveSection(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveSection);
+    }
+    function createListItem(task, section) {
+      const item = document.createElement('div');
+      item.className = 'list-item';
+      item.draggable = true;
+      item.dataset.taskId = task.id;
+      item.addEventListener('dragstart', (e) => {
+        item.classList.add('dragging');
+        e.dataTransfer.setData('text/plain', task.id);
+        e.dataTransfer.effectAllowed = 'move';
+      });
+      item.addEventListener('dragend', () => {
+        item.classList.remove('dragging');
+        document.querySelectorAll('.list-drop-indicator').forEach(el => el.remove());
+        document.querySelectorAll('.list-section.drag-over').forEach(el => el.classList.remove('drag-over'));
+      });
+      const checkbox = document.createElement('span');
+      checkbox.className = `checkbox ${task.checked ? 'checked' : ''}`;
+      checkbox.addEventListener('click', (e) => {
+        e.stopPropagation();
+        task.checked = !task.checked;
+        markChanged();
+        renderTasks();
+      });
+      const content = document.createElement('div');
+      content.className = 'list-item-content';
+      const title = document.createElement('div');
+      title.className = `list-item-title ${task.checked ? 'checked' : ''}`;
+      title.textContent = task.title;
+      title.addEventListener('click', (e) => {
+        e.stopPropagation();
+        startEditingListItem(title, task);
+      });
+      content.appendChild(title);
+      if (task.note) {
+        const note = document.createElement('div');
+        note.className = 'list-item-note';
+        note.textContent = task.note;
+        note.addEventListener('click', (e) => {
+          e.stopPropagation();
+          startEditingListNote(note, task);
+        });
+        content.appendChild(note);
+      } else {
+        const addNote = document.createElement('div');
+        addNote.className = 'list-item-note add-note';
+        addNote.textContent = '+ Add note';
+        addNote.addEventListener('click', (e) => {
+          e.stopPropagation();
+          startEditingListNote(addNote, task);
+        });
+        content.appendChild(addNote);
+      }
+      if (task.subtasks && task.subtasks.length > 0) {
+        const subtasksContainer = document.createElement('div');
+        subtasksContainer.className = 'list-item-subtasks';
+        task.subtasks.forEach((st, idx) => {
+          const subtaskEl = document.createElement('div');
+          subtaskEl.className = 'list-item-subtask';
+          const stCheckbox = document.createElement('span');
+          stCheckbox.className = `checkbox ${st.checked ? 'checked' : ''}`;
+          stCheckbox.addEventListener('click', (e) => {
+            e.stopPropagation();
+            st.checked = !st.checked;
+            markChanged();
+            renderTasks();
+          });
+          const stText = document.createElement('span');
+          stText.textContent = st.text;
+          if (st.checked) {
+            stText.style.textDecoration = 'line-through';
+            stText.style.color = 'var(--text-muted)';
+          }
+          stText.addEventListener('click', (e) => {
+            e.stopPropagation();
+            startEditingListSubtask(stText, task, idx);
+          });
+          subtaskEl.appendChild(stCheckbox);
+          subtaskEl.appendChild(stText);
+          subtasksContainer.appendChild(subtaskEl);
+        });
+        content.appendChild(subtasksContainer);
+      }
+      const addSubtask = document.createElement('div');
+      addSubtask.className = 'list-item-add-subtask';
+      addSubtask.textContent = '+ Add subtask';
+      addSubtask.addEventListener('click', (e) => {
+        e.stopPropagation();
+        startAddingListSubtask(addSubtask, task);
+      });
+      content.appendChild(addSubtask);
+      const actions = document.createElement('div');
+      actions.className = 'list-item-actions';
+      actions.innerHTML = '<button title="Delete task">&times;</button>';
+      actions.querySelector('button').addEventListener('click', (e) => {
+        e.stopPropagation();
+        deleteTask(task);
+      });
+      item.appendChild(checkbox);
+      item.appendChild(content);
+      item.appendChild(actions);
+      return item;
+    }
+    function startEditingListNote(noteEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.note || '';
+      input.placeholder = 'Add a note...';
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 4px 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+      noteEl.replaceWith(input);
+      input.focus();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        task.note = input.value.trim();
+        markChanged();
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startEditingListSubtask(subtaskEl, task, idx) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.subtasks[idx].text;
+      input.style.cssText = 'width: calc(100% - 30px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+      subtaskEl.replaceWith(input);
+      input.focus();
+      input.select();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newText = input.value.trim();
+        if (newText) { task.subtasks[idx].text = newText; }
+        else { task.subtasks.splice(idx, 1); }
+        markChanged();
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startAddingListSubtask(el, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'New subtask...';
+      input.style.cssText = 'width: calc(100% - 10px); background: var(--bg-card); border: 2px solid var(--accent); border-radius: 4px; padding: 2px 6px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none;';
+      el.replaceWith(input);
+      input.focus();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const text = input.value.trim();
+        if (text) {
+          if (!task.subtasks) task.subtasks = [];
+          task.subtasks.push({ text, checked: false });
+          markChanged();
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function startEditingListItem(titleEl, task) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = task.title;
+      input.style.cssText = 'width: 100%; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 6px; padding: 8px 12px; color: var(--text-primary); font-size: 15px; font-family: inherit; outline: none;';
+      titleEl.replaceWith(input);
+      input.focus();
+      input.select();
+      let saved = false;
+      const saveEdit = () => {
+        if (saved) return;
+        saved = true;
+        const newTitle = input.value.trim();
+        if (newTitle && newTitle !== task.title) {
+          task.title = newTitle;
+          markChanged();
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveEdit(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveEdit);
+    }
+    function showSectionPicker(anchorEl) {
+      document.querySelectorAll('.section-picker').forEach(el => el.remove());
+      const picker = document.createElement('div');
+      picker.className = 'section-picker';
+      const rect = anchorEl.getBoundingClientRect();
+      picker.style.top = (rect.bottom + 4) + 'px';
+      picker.style.right = (window.innerWidth - rect.right) + 'px';
+      sections.forEach(section => {
+        const btn = document.createElement('button');
+        btn.textContent = section.name;
+        btn.addEventListener('click', () => {
+          quickAddSection = section.id;
+          picker.remove();
+          renderTasks();
+          setTimeout(() => document.getElementById('quickAddInput')?.focus(), 10);
+        });
+        picker.appendChild(btn);
+      });
+      document.body.appendChild(picker);
+      setTimeout(() => {
+        document.addEventListener('click', function closeHandler(e) {
+          if (!picker.contains(e.target)) {
+            picker.remove();
+            document.removeEventListener('click', closeHandler);
+          }
+        });
+      }, 10);
+    }
+    function switchTaskView(view) {
+      currentView = view;
+      if (view === 'list') {
+        listView.style.display = 'block';
+        board.style.display = 'none';
+        listViewBtn.classList.add('active');
+        boardViewBtn.classList.remove('active');
+      } else {
+        listView.style.display = 'none';
+        board.style.display = 'flex';
+        listViewBtn.classList.remove('active');
+        boardViewBtn.classList.add('active');
+      }
+      renderTasks();
+    }
+    listViewBtn.addEventListener('click', () => switchTaskView('list'));
+    boardViewBtn.addEventListener('click', () => switchTaskView('board'));
+    function startAddingSection(btn) {
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.placeholder = 'Section name...';
+      input.style.cssText = 'width: 220px; background: var(--bg-card); border: 2px solid var(--accent); border-radius: 8px; padding: 10px 14px; color: var(--text-primary); font-size: 14px; font-family: inherit; outline: none;';
+      btn.innerHTML = '';
+      btn.style.cssText = 'background: var(--bg-secondary); border: 2px dashed var(--accent); display: flex; align-items: center; justify-content: center; cursor: default; min-height: 120px; min-width: 340px; border-radius: 12px;';
+      btn.appendChild(input);
+      input.focus();
+      let saved = false;
+      const saveSection = () => {
+        if (saved) return;
+        saved = true;
+        const name = input.value.trim();
+        if (name) {
+          const id = taskSectionId(name);
+          if (!tasks[id]) {
+            sections.push({ id, name });
+            tasks[id] = [];
+            markChanged();
+          }
+        }
+        renderTasks();
+      };
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') { e.preventDefault(); saveSection(); }
+        else if (e.key === 'Escape') { saved = true; renderTasks(); }
+      });
+      input.addEventListener('blur', saveSection);
+    }
+    async function openTaskFile() {
+      try {
+        [taskFileHandle] = await window.showOpenFilePicker({
+          types: [{ description: 'Markdown', accept: { 'text/markdown': ['.md'] } }]
+        });
+        const file = await taskFileHandle.getFile();
+        const content = await file.text();
+        lastModified = file.lastModified;
+        const result = parseTaskMarkdown(content);
+        sections = result.sections;
+        tasks = result.tasks;
+        switchTaskView('board');
+        startWatching();
+        taskFileName = file.name;
+        filePathEl.textContent = file.name;
+        showStatus('Loaded ' + file.name);
+      } catch (e) {
+        if (e.name !== 'AbortError') { showStatus('Error: ' + e.message); }
+      }
+    }
+    openTaskBtn.addEventListener('click', openTaskFile);
+    document.getElementById('openBtnLarge')?.addEventListener('click', openTaskFile);
+    saveBtn.addEventListener('click', async () => {
+      if (!taskFileHandle) return;
+      try {
+        const writable = await taskFileHandle.createWritable();
+        await writable.write(toMarkdown());
+        await writable.close();
+        hasChanges = false;
+        saveBtn.disabled = true;
+        showStatus('Saved');
+      } catch (e) { showStatus('Error: ' + e.message); }
+    });
+    window.addEventListener('beforeunload', (e) => {
+      if (hasChanges) { e.preventDefault(); e.returnValue = ''; }
+    });
+    // ============================================================
+    // ===== MEMORY FUNCTIONALITY =====
+    // ============================================================
+    let memoryDirHandle = null;
+    let memoryData = {
+      claudeMd: null,
+      memoryFiles: [],
+      memoryDirs: {}
+    };
+    const memoryEmptyState = document.getElementById('memoryEmptyState');
+    const memoryMainContent = document.getElementById('memoryMainContent');
+    const memoryTabsContainer = document.getElementById('memoryTabsContainer');
+    const memoryContentContainer = document.getElementById('memoryContentContainer');
+    const modalOverlay = document.getElementById('modalOverlay');
+    function escapeHtml(text) {
+      const div = document.createElement('div');
+      div.textContent = text || '';
+      return div.innerHTML;
+    }
+    function parseMemoryMarkdown(content) {
+      const parsed = {
+        title: '',
+        fields: {},
+        sections: {},
+        tables: [],
+        rawContent: content
+      };
+      const lines = content.split('\n');
+      let currentSection = '_intro';
+      parsed.sections[currentSection] = [];
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.match(/^# /)) {
+          parsed.title = line.replace(/^# /, '').trim();
+          continue;
+        }
+        if (line.match(/^## /)) {
+          currentSection = line.replace(/^## /, '').trim();
+          parsed.sections[currentSection] = [];
+          continue;
+        }
+        const kvMatch = line.match(/^\*\*(.+?):\*\*\s*(.*)$/);
+        if (kvMatch) {
+          parsed.fields[kvMatch[1]] = kvMatch[2];
+          continue;
+        }
+        parsed.sections[currentSection].push(line);
+      }
+      for (const key in parsed.sections) {
+        parsed.sections[key] = parsed.sections[key].join('\n').trim();
+      }
+      const tableRegex = /\|(.+)\|\n\|[-| ]+\|\n((?:\|.+\|\n?)+)/g;
+      let match;
+      while ((match = tableRegex.exec(content)) !== null) {
+        const headers = match[1].split('|').map(h => h.trim()).filter(h => h);
+        const rowLines = match[2].trim().split('\n');
+        const rows = rowLines.map(row => row.split('|').map(c => c.trim()).filter(c => c));
+        parsed.tables.push({ headers, rows });
+      }
+      return parsed;
+    }
+    function getPreview(content, maxLength = 150) {
+      let preview = content
+        .replace(/^#+ .+$/gm, '')
+        .replace(/\*\*(.+?):\*\*.*/g, '')
+        .replace(/\|.+\|/g, '')
+        .replace(/[-=]{3,}/g, '')
+        .trim()
+        .substring(0, maxLength);
+      if (content.length > maxLength) preview += '...';
+      return preview;
+    }
+    function getDisplayName(filename) {
+      return filename
+        .replace('.md', '')
+        .split(/[-_]/)
+        .map(w => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(' ');
+    }
+    async function loadMemoryDirectory() {
+      try {
+        memoryDirHandle = await window.showDirectoryPicker();
+        memoryData = { claudeMd: null, memoryFiles: [], memoryDirs: {} };
+        try {
+          const claudeFileHandle = await memoryDirHandle.getFileHandle('CLAUDE.md');
+          const file = await claudeFileHandle.getFile();
+          memoryData.claudeMd = { content: await file.text(), fileHandle: claudeFileHandle };
+        } catch (e) { console.log('No CLAUDE.md found'); }
+        try {
+          const memoryDir = await memoryDirHandle.getDirectoryHandle('memory');
+          for await (const entry of memoryDir.values()) {
+            if (entry.kind === 'file' && entry.name.endsWith('.md')) {
+              const file = await entry.getFile();
+              memoryData.memoryFiles.push({
+                name: entry.name,
+                content: await file.text(),
+                fileHandle: entry
+              });
+            } else if (entry.kind === 'directory') {
+              memoryData.memoryDirs[entry.name] = [];
+              const subDirHandle = entry;
+              for await (const subEntry of subDirHandle.values()) {
+                if (subEntry.kind === 'file' && subEntry.name.endsWith('.md')) {
+                  const file = await subEntry.getFile();
+                  const content = await file.text();
+                  memoryData.memoryDirs[entry.name].push({
+                    name: subEntry.name,
+                    content: content,
+                    fileHandle: subEntry,
+                    dirHandle: subDirHandle,
+                    parsed: parseMemoryMarkdown(content)
+                  });
+                }
+              }
+            }
+          }
+        } catch (e) { console.log('No memory/ directory found'); }
+        renderMemory();
+        memoryEmptyState.style.display = 'none';
+        memoryMainContent.style.display = 'flex';
+        filePathEl.textContent = memoryDirHandle.name;
+        showStatus('Loaded memory from ' + memoryDirHandle.name);
+      } catch (e) {
+        if (e.name !== 'AbortError') { showStatus('Error: ' + e.message); }
+      }
+    }
+    function renderMemory() {
+      renderMemoryTabs();
+      renderMemoryContent();
+    }
+    function renderMemoryTabs() {
+      let html = '';
+      if (memoryData.claudeMd) {
+        html += `<button class="memory-tab active" data-tab="overview">Overview</button>`;
+      }
+      for (const file of memoryData.memoryFiles) {
+        const name = file.name.replace('.md', '');
+        html += `<button class="memory-tab${!memoryData.claudeMd && memoryData.memoryFiles[0] === file ? ' active' : ''}" data-tab="file-${name}">${name}</button>`;
+      }
+      for (const dirName of Object.keys(memoryData.memoryDirs).sort()) {
+        const files = memoryData.memoryDirs[dirName];
+        let count;
+        if (dirName === 'context') {
+          count = 0;
+          for (const file of files) {
+            const p = file.parsed;
+            count += Object.keys(p.fields).length;
+            for (const table of p.tables) {
+              count += table.rows.length;
+            }
+            for (const [sName, sContent] of Object.entries(p.sections)) {
+              if (sContent && sName !== '_intro') {
+                count += sContent.split('\n').filter(l => l.trim() && !l.trim().startsWith('|')).length;
+              }
+            }
+          }
+        } else {
+          count = files.length;
+        }
+        html += `<button class="memory-tab" data-tab="dir-${dirName}">${dirName} <span class="count">${count}</span></button>`;
+      }
+      memoryTabsContainer.innerHTML = html;
+      memoryTabsContainer.querySelectorAll('.memory-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+          memoryTabsContainer.querySelectorAll('.memory-tab').forEach(t => t.classList.remove('active'));
+          tab.classList.add('active');
+          renderMemoryContent();
+        });
+      });
+    }
+    function renderMemoryContent() {
+      const activeTab = memoryTabsContainer.querySelector('.memory-tab.active');
+      if (!activeTab) return;
+      const tabId = activeTab.dataset.tab;
+      if (tabId === 'overview') { renderMemoryOverview(); }
+      else if (tabId.startsWith('file-')) {
+        const fileName = tabId.replace('file-', '') + '.md';
+        renderMemoryFile(fileName);
+      } else if (tabId.startsWith('dir-')) {
+        const dirName = tabId.replace('dir-', '');
+        renderMemoryDirectory(dirName);
+      }
+    }
+    function renderMemoryOverview() {
+      if (!memoryData.claudeMd) return;
+      let statsHtml = '<div class="stats">';
+      for (const [dirName, files] of Object.entries(memoryData.memoryDirs)) {
+        let count;
+        if (dirName === 'context') {
+          count = 0;
+          for (const file of files) {
+            const p = file.parsed;
+            count += Object.keys(p.fields).length;
+            for (const table of p.tables) { count += table.rows.length; }
+            for (const [sName, sContent] of Object.entries(p.sections)) {
+              if (sContent && sName !== '_intro') {
+                count += sContent.split('\n').filter(l => l.trim() && !l.trim().startsWith('|')).length;
+              }
+            }
+          }
+        } else {
+          count = files.length;
+        }
+        statsHtml += `
+          <div class="stat">
+            <div class="stat-value">${count}</div>
+            <div class="stat-label">${dirName}</div>
+          </div>
+        `;
+      }
+      statsHtml += '</div>';
+      const claudeContent = renderMarkdownToHtml(memoryData.claudeMd.content);
+      memoryContentContainer.innerHTML = `
+        ${statsHtml}
+        <div class="file-card">
+          <div class="file-card-header" onclick="this.nextElementSibling.classList.toggle('expanded'); this.querySelector('.toggle').textContent = this.nextElementSibling.classList.contains('expanded') ? '\u2212' : '+'">
+            <span class="file-card-title">CLAUDE.md</span>
+            <span class="toggle" style="color: var(--text-muted);">&minus;</span>
+          </div>
+          <div class="file-card-content expanded markdown-content">${claudeContent}</div>
+        </div>
+        <button onclick="openEditModal('CLAUDE.md', 'claudeMd')" style="margin-top: 10px;">Edit CLAUDE.md</button>
+      `;
+    }
+    function renderMemoryFile(fileName) {
+      const file = memoryData.memoryFiles.find(f => f.name === fileName);
+      if (!file) return;
+      const content = renderMarkdownToHtml(file.content);
+      memoryContentContainer.innerHTML = `
+        <div class="file-card">
+          <div class="file-card-header">
+            <span class="file-card-title">${fileName}</span>
+          </div>
+          <div class="file-card-content expanded markdown-content">${content}</div>
+        </div>
+        <button onclick="openEditModal('${fileName}', 'memoryFile')" style="margin-top: 10px;">Edit ${fileName}</button>
+      `;
+    }
+    function renderMemoryDirectory(dirName) {
+      const files = memoryData.memoryDirs[dirName] || [];
+      // Context directory uses flat list view
+      if (dirName === 'context') {
+        renderMemoryDirectoryFlat(dirName, files);
+        return;
+      }
+      // All other directories use card grid view
+      let html = `
+        <div class="search-box">
+          <span style="color: var(--text-muted);">&#128269;</span>
+          <input type="text" placeholder="Search ${dirName}..." id="dirSearch" oninput="filterMemoryDirectory('${dirName}', this.value)">
+        </div>
+        <div class="memory-grid" id="dirGrid">
+      `;
+      for (const file of files) {
+        const p = file.parsed;
+        const title = p.title || getDisplayName(file.name);
+        let fieldsHtml = '';
+        const fieldEntries = Object.entries(p.fields).slice(0, 3);
+        if (fieldEntries.length > 0) {
+          fieldsHtml = '<div class="memory-card-fields">';
+          for (const [key, value] of fieldEntries) {
+            fieldsHtml += `
+              <div class="memory-card-field">
+                <span class="memory-card-field-label">${escapeHtml(key)}</span>
+                <span class="memory-card-field-value">${escapeHtml(value)}</span>
+              </div>
+            `;
+          }
+          fieldsHtml += '</div>';
+        }
+        let preview = '';
+        for (const [sectionName, sectionContent] of Object.entries(p.sections)) {
+          if (sectionContent && sectionName !== '_intro') {
+            preview = getPreview(sectionContent, 100);
+            break;
+          }
+        }
+        if (!preview) preview = getPreview(p.rawContent, 100);
+        html += `
+          <div class="memory-card" onclick="openFileModal('${dirName}', '${file.name}')" data-search="${escapeHtml((title + ' ' + JSON.stringify(p.fields) + ' ' + p.rawContent).toLowerCase())}">
+            <div class="memory-card-title">${escapeHtml(title)}</div>
+            ${fieldsHtml}
+            <div class="memory-card-preview">${escapeHtml(preview)}</div>
+          </div>
+        `;
+      }
+      html += `
+        <div class="add-btn" onclick="openNewFileModal('${dirName}')">
+          + Add to ${dirName}
+        </div>
+      </div>`;
+      memoryContentContainer.innerHTML = html;
+    }
+    function renderMemoryDirectoryFlat(dirName, files) {
+      let html = `
+        <div class="search-box">
+          <span style="color: var(--text-muted);">&#128269;</span>
+          <input type="text" placeholder="Search ${dirName}..." id="dirSearch" oninput="filterMemoryDirectory('${dirName}', this.value)">
+        </div>
+        <div id="dirGrid">
+      `;
+      for (const file of files) {
+        const p = file.parsed;
+        // Render fields as a key-value table
+        const fieldEntries = Object.entries(p.fields);
+        if (fieldEntries.length > 0) {
+          html += `<div class="file-card" style="margin-bottom: 16px;"><table class="memory-flat-table"><tbody>`;
+          for (const [key, value] of fieldEntries) {
+            html += `<tr data-search="${escapeHtml((key + ' ' + value).toLowerCase())}"><td>${escapeHtml(key)}</td><td>${escapeHtml(value)}</td></tr>`;
+          }
+          html += `</tbody></table></div>`;
+        }
+        // Render parsed tables (teams, tools, etc.) as proper HTML tables
+        for (const table of p.tables) {
+          html += `<div class="file-card" style="margin-bottom: 16px;"><table class="memory-flat-table"><thead><tr>`;
+          for (const h of table.headers) {
+            html += `<th>${escapeHtml(h)}</th>`;
+          }
+          html += `</tr></thead><tbody>`;
+          for (const row of table.rows) {
+            const searchData = row.join(' ').toLowerCase();
+            html += `<tr data-search="${escapeHtml(searchData)}">`;
+            for (const cell of row) {
+              html += `<td>${escapeHtml(cell)}</td>`;
+            }
+            html += `</tr>`;
+          }
+          html += `</tbody></table></div>`;
+        }
+        // Render non-table section content as list items
+        for (const [sectionName, sectionContent] of Object.entries(p.sections)) {
+          if (!sectionContent || sectionName === '_intro') continue;
+          const lines = sectionContent.split('\n').filter(l => l.trim() && !l.trim().startsWith('|'));
+          if (lines.length === 0) continue;
+          html += `<div class="file-card" style="margin-bottom: 16px;"><table class="memory-flat-table"><thead><tr><th colspan="2">${escapeHtml(sectionName)}</th></tr></thead><tbody>`;
+          for (const line of lines) {
+            const cleanLine = line.replace(/^[-*]\s*/, '').replace(/\*\*(.+?)\*\*/g, '$1').trim();
+            if (!cleanLine) continue;
+            html += `<tr data-search="${escapeHtml((sectionName + ' ' + cleanLine).toLowerCase())}"><td colspan="2">${escapeHtml(cleanLine)}</td></tr>`;
+          }
+          html += `</tbody></table></div>`;
+        }
+      }
+      html += `</div>`;
+      memoryContentContainer.innerHTML = html;
+    }
+    function filterMemoryDirectory(dirName, searchTerm) {
+      const grid = document.getElementById('dirGrid');
+      const items = grid.querySelectorAll('.memory-card, tr[data-search]');
+      const search = searchTerm.toLowerCase();
+      items.forEach(item => {
+        const searchData = item.dataset.search || '';
+        item.style.display = (!search || searchData.includes(search)) ? '' : 'none';
+      });
+    }
+    function renderMarkdownToHtml(md) {
+      let html = escapeHtml(md);
+      html = html.replace(/^### (.+)$/gm, '<h3>$1</h3>');
+      html = html.replace(/^## (.+)$/gm, '<h2>$1</h2>');
+      html = html.replace(/^# (.+)$/gm, '<h1>$1</h1>');
+      html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+      html = html.replace(/\*(.+?)\*/g, '<em>$1</em>');
+      html = html.replace(/```[\s\S]*?```/g, match => {
+        const code = match.replace(/```\w*\n?/g, '');
+        return '<pre><code>' + code + '</code></pre>';
+      });
+      html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+      html = html.replace(/(\|.+\|\n\|[-| ]+\|\n(?:\|.+\|\n?)+)/g, match => {
+        const lines = match.trim().split('\n');
+        const headers = lines[0].split('|').filter(c => c.trim());
+        const rows = lines.slice(2).map(row => row.split('|').filter(c => c.trim()));
+        let table = '<table><thead><tr>';
+        headers.forEach(h => table += `<th>${h.trim()}</th>`);
+        table += '</tr></thead><tbody>';
+        rows.forEach(row => {
+          table += '<tr>';
+          row.forEach(cell => table += `<td>${cell.trim()}</td>`);
+          table += '</tr>';
+        });
+        table += '</tbody></table>';
+        return table;
+      });
+      html = html.replace(/^- (.+)$/gm, '<li>$1</li>');
+      html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+      html = html.replace(/^(?!<[hupol]|<li|<table|<pre)(.+)$/gm, '<p>$1</p>');
+      html = html.replace(/<p><\/p>/g, '');
+      html = html.replace(/<p>\s*<\/p>/g, '');
+      return html;
+    }
+    // Modal functions
+    function openFileModal(dirName, fileName) {
+      const files = memoryData.memoryDirs[dirName];
+      const file = files.find(f => f.name === fileName);
+      if (!file) return;
+      document.getElementById('modalTitle').textContent = getDisplayName(fileName);
+      document.getElementById('modalBody').innerHTML = `
+        <div class="markdown-content" style="margin-bottom: 20px;">
+          ${renderMarkdownToHtml(file.content)}
+        </div>
+        <div class="form-group">
+          <label>Edit Raw Markdown</label>
+          <textarea id="editContent">${escapeHtml(file.content)}</textarea>
+        </div>
+      `;
+      modalOverlay.classList.add('visible');
+      modalOverlay.dataset.type = 'dirFile';
+      modalOverlay.dataset.dirName = dirName;
+      modalOverlay.dataset.fileName = fileName;
+    }
+    function openNewFileModal(dirName) {
+      document.getElementById('modalTitle').textContent = `Add to ${dirName}`;
+      let template = '# New Entry\n\n';
+      const existingFiles = memoryData.memoryDirs[dirName];
+      if (existingFiles && existingFiles.length > 0) {
+        const sample = existingFiles[0].parsed;
+        for (const key of Object.keys(sample.fields)) {
+          template += `**${key}:** \n`;
+        }
+        template += '\n';
+        for (const section of Object.keys(sample.sections)) {
+          if (section !== '_intro') {
+            template += `## ${section}\n\n`;
+          }
+        }
+      }
+      document.getElementById('modalBody').innerHTML = `
+        <div class="form-group">
+          <label>Filename (without .md)</label>
+          <input type="text" id="newFileName" placeholder="my-new-entry" style="width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; color: var(--text-primary); font-size: 14px; font-family: inherit; margin-bottom: 16px;">
+        </div>
+        <div class="form-group">
+          <label>Content</label>
+          <textarea id="editContent">${escapeHtml(template)}</textarea>
+        </div>
+      `;
+      modalOverlay.classList.add('visible');
+      modalOverlay.dataset.type = 'newDirFile';
+      modalOverlay.dataset.dirName = dirName;
+    }
+    function openEditModal(fileName, type) {
+      let content = '';
+      if (type === 'claudeMd') {
+        content = memoryData.claudeMd.content;
+      } else if (type === 'memoryFile') {
+        const file = memoryData.memoryFiles.find(f => f.name === fileName);
+        if (file) content = file.content;
+      }
+      document.getElementById('modalTitle').textContent = `Edit ${fileName}`;
+      document.getElementById('modalBody').innerHTML = `
+        <div class="form-group">
+          <label>Content</label>
+          <textarea id="editContent" style="min-height: 400px;">${escapeHtml(content)}</textarea>
+        </div>
+      `;
+      modalOverlay.classList.add('visible');
+      modalOverlay.dataset.type = type;
+      modalOverlay.dataset.fileName = fileName;
+    }
+    function closeModal() {
+      modalOverlay.classList.remove('visible');
+    }
+    async function saveModal() {
+      const type = modalOverlay.dataset.type;
+      const content = document.getElementById('editContent').value;
+      try {
+        if (type === 'claudeMd') {
+          memoryData.claudeMd.content = content;
+          const writable = await memoryData.claudeMd.fileHandle.createWritable();
+          await writable.write(content);
+          await writable.close();
+          showStatus('Saved CLAUDE.md');
+        } else if (type === 'memoryFile') {
+          const fileName = modalOverlay.dataset.fileName;
+          const file = memoryData.memoryFiles.find(f => f.name === fileName);
+          if (file) {
+            file.content = content;
+            const writable = await file.fileHandle.createWritable();
+            await writable.write(content);
+            await writable.close();
+            showStatus('Saved ' + fileName);
+          }
+        } else if (type === 'dirFile') {
+          const dirName = modalOverlay.dataset.dirName;
+          const fileName = modalOverlay.dataset.fileName;
+          const files = memoryData.memoryDirs[dirName];
+          const file = files.find(f => f.name === fileName);
+          if (file) {
+            file.content = content;
+            file.parsed = parseMemoryMarkdown(content);
+            const writable = await file.fileHandle.createWritable();
+            await writable.write(content);
+            await writable.close();
+            showStatus('Saved ' + fileName);
+          }
+        } else if (type === 'newDirFile') {
+          const dirName = modalOverlay.dataset.dirName;
+          let fileName = document.getElementById('newFileName').value.trim();
+          if (!fileName) { showStatus('Please enter a filename'); return; }
+          if (!fileName.endsWith('.md')) fileName += '.md';
+          const memoryDir = await memoryDirHandle.getDirectoryHandle('memory');
+          const subDir = await memoryDir.getDirectoryHandle(dirName, { create: true });
+          const fileHandle = await subDir.getFileHandle(fileName, { create: true });
+          const writable = await fileHandle.createWritable();
+          await writable.write(content);
+          await writable.close();
+          memoryData.memoryDirs[dirName].push({
+            name: fileName,
+            content: content,
+            fileHandle: fileHandle,
+            dirHandle: subDir,
+            parsed: parseMemoryMarkdown(content)
+          });
+          showStatus('Created ' + fileName);
+        }
+        closeModal();
+        renderMemory();
+      } catch (e) {
+        showStatus('Error saving: ' + e.message);
+      }
+    }
+    // Memory event listeners
+    openMemoryBtn.addEventListener('click', loadMemoryDirectory);
+    document.getElementById('openMemoryBtnLarge').addEventListener('click', loadMemoryDirectory);
+    document.getElementById('modalClose').addEventListener('click', closeModal);
+    document.getElementById('modalCancel').addEventListener('click', closeModal);
+    document.getElementById('modalSave').addEventListener('click', saveModal);
+    modalOverlay.addEventListener('click', (e) => {
+      if (e.target === modalOverlay) closeModal();
+    });
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeModal();
+    });
+    // Expose functions to onclick handlers
+    window.openFileModal = openFileModal;
+    window.openNewFileModal = openNewFileModal;
+    window.openEditModal = openEditModal;
+    window.filterMemoryDirectory = filterMemoryDirectory;
+  </script>
+</body>
+</html>