script.js

// ===========================================================
// Role Focus Plugin — script.js
// ===========================================================

// Keep PLUGIN_ID and PLUGIN_VERSION in sync with plugin.json.
// PLUGIN_ID is also referenced by the panel webview's jsBridge — it is
// injected into the panel HTML so there is no other place to update.
const PLUGIN_ID = 'marginalreader.RoleFocus'
const PLUGIN_VERSION = '1.0.0'

const PANEL_WINDOW_ID = 'role-focus'
const PREF_LAST_ROLE = 'roleFocus_lastSelectedRole'
const PREF_PROJECT_PANEL_WIDTH = 'roleFocus_projectPanelWidth'
const PREF_FLAGS_ON_TOP = 'roleFocus_flagsOnTop'
const PREF_LAST_INSTALLED_VERSION = 'roleFocus_lastInstalledVersion'

function getLastSelectedRole() {
  try { return DataStore.preference(PREF_LAST_ROLE) || null } catch (e) { return null }
}

function setLastSelectedRole(roleName) {
  try { DataStore.setPreference(PREF_LAST_ROLE, roleName) } catch (e) { /* ignore */ }
}

function getProjectPanelWidth() {
  try {
    const v = Number(DataStore.preference(PREF_PROJECT_PANEL_WIDTH))
    return (v >= 140 && v <= 400) ? v : null
  } catch (e) { return null }
}

function setProjectPanelWidth(width) {
  try { DataStore.setPreference(PREF_PROJECT_PANEL_WIDTH, Number(width)) } catch (e) { /* ignore */ }
}

function getFlagsOnTop() {
  try { return DataStore.preference(PREF_FLAGS_ON_TOP) === true } catch (e) { return false }
}

function setFlagsOnTop(value) {
  try { DataStore.setPreference(PREF_FLAGS_ON_TOP, value === true) } catch (e) { /* ignore */ }
}

// --------------- ROLES FROM FOLDERS ---------------

function getRolesParentFolder() {
  const settings = DataStore.settings || {}
  return (settings.rolesFolder || 'Roles').trim()
}

function deriveRoleNames(folderName) {
  // Strip leading number+space: "1 Husband" → "Husband"
  const displayName = folderName.replace(/^\d+\s+/, '')
  // Lowercase and remove non-alphanumeric for @mention
  const mentionName = displayName.toLowerCase().replace(/[^a-z0-9]/g, '')
  return { folderName, displayName, mentionName }
}

function getRolesFromFolders() {
  const parent = getRolesParentFolder()
  const prefix = parent + '/'
  const folders = DataStore.folders || []
  // Keep only direct children of the parent folder (no further nesting)
  return folders
    .filter(f => f.startsWith(prefix) && !f.slice(prefix.length).includes('/'))
    .map(f => deriveRoleNames(f.slice(prefix.length)))
}

// --------------- DATE HELPERS ---------------

function isWithinDays(noteDate, days) {
  if (!noteDate) return false
  const date = noteDate instanceof Date ? noteDate : new Date(noteDate)
  if (isNaN(date.getTime())) return false
  const cutoff = new Date()
  cutoff.setDate(cutoff.getDate() - days)
  return date >= cutoff
}

// --------------- SUB-CONTENT CAPTURE ---------------

function tasksWithSubContent(allParagraphs, tasks) {
  return tasks.map(task => {
    const taskIndex = allParagraphs.findIndex(p => p.lineIndex === task.lineIndex)
    const subContent = []
    if (taskIndex !== -1) {
      let i = taskIndex + 1
      while (i < allParagraphs.length) {
        const p = allParagraphs[i]
        if (p.indents > task.indents) {
          subContent.push({ content: p.content, type: p.type, indents: p.indents })
          i++
        } else {
          break
        }
      }
    }
    return { taskContent: task.content, rawContent: task.content, taskType: task.type, lineIndex: task.lineIndex, indents: task.indents || 0, subContent }
  })
}

// --------------- NOTE SERIALIZATION ---------------

function serializeNote(note) {
  return {
    filename: note.filename,
    type: note.type || 'Notes', // 'Notes' | 'Calendar'
  }
}

function getNoteByRef(noteRef) {
  const { filename, type } = noteRef
  if (type === 'Calendar') {
    return (DataStore.calendarNotes || []).find(n => n.filename === filename) || null
  }
  return (DataStore.projectNotes || []).find(n => n.filename === filename) || null
}

// --------------- DATA QUERIES ---------------

function isNonEmptyTask(content) {
  if (!content) return false
  const trimmed = content.trim()
  // Reject blank, lone punctuation, or pure-whitespace strings
  return trimmed.length > 0 && /\w/.test(trimmed)
}

// noteCache: { projectNotes, calendarNotes } — pass in to avoid repeated DataStore access
function getTasksForRole(folderName, noteCache) {
  const { mentionName } = deriveRoleNames(folderName)
  const folderTasks = []
  const mentionTasks = []
  const mentionPattern = `@${mentionName}`
  const roleFolderPrefix = `${getRolesParentFolder()}/${folderName}/`
  const projectNotes  = noteCache ? noteCache.projectNotes  : (DataStore.projectNotes  || [])
  const calendarNotes = noteCache ? noteCache.calendarNotes : (DataStore.calendarNotes || [])

  // Source 1: all notes inside the role folder
  const roleNotes = projectNotes.filter(n => n.filename.startsWith(roleFolderPrefix))
  for (const note of roleNotes) {
    const tasks = note.paragraphs.filter(p => p.type === 'open' && isNonEmptyTask(p.content))
    if (tasks.length === 0) continue
    const withSub = tasksWithSubContent(note.paragraphs, tasks)
    const noteRef = serializeNote(note)
    folderTasks.push(...withSub.map(t => ({
      ...t,
      note: noteRef,
      noteName: note.title || note.filename,
      noteDate: null,
    })))
  }

  // Source 2: any note (project or calendar) containing @rolename, outside the role folder
  const allNotes = [...projectNotes, ...calendarNotes]
  for (const note of allNotes) {
    if (note.filename.startsWith(roleFolderPrefix)) continue
    const tasks = note.paragraphs.filter(p =>
      p.type === 'open' && isNonEmptyTask(p.content) && p.content.toLowerCase().includes(mentionPattern)
    )
    if (tasks.length === 0) continue
    const withSub = tasksWithSubContent(note.paragraphs, tasks)
    const noteRef = serializeNote(note)
    const isCalendar = note.type === 'Calendar'
    const noteName = isCalendar
      ? (note.date ? note.date.toISOString().split('T')[0] : note.filename)
      : (note.title || note.filename)
    const noteDate = isCalendar && note.date ? note.date.toISOString().split('T')[0] : null
    mentionTasks.push(...withSub.map(t => ({
      ...t,
      note: noteRef,
      noteName,
      noteDate,
    })))
  }

  // Deduplicate by filename + lineIndex
  const seen = new Set()
  return [...folderTasks, ...mentionTasks].filter(t => {
    const key = `${t.note.filename}::${t.lineIndex}`
    if (seen.has(key)) return false
    seen.add(key)
    return true
  })
}

function getUnassignedTasks(lookback = 30, noteCache) {
  const roles = getRolesFromFolders()
  const mentionPatterns = roles.map(r => `@${r.mentionName}`)
  let calendarNotes = noteCache ? noteCache.calendarNotes : (DataStore.calendarNotes || [])
  if (lookback > 0) {
    calendarNotes = calendarNotes.filter(n => n.date && isWithinDays(n.date, lookback))
  }

  const result = []
  for (const note of calendarNotes) {
    const tasks = note.paragraphs.filter(p => {
      if (p.type !== 'open') return false
      if (!isNonEmptyTask(p.content)) return false
      const content = p.content.toLowerCase()
      return !mentionPatterns.some(pattern => content.includes(pattern))
    })
    if (tasks.length === 0) continue

    const withSub = tasksWithSubContent(note.paragraphs, tasks)
    const dateStr = note.date ? note.date.toISOString().split('T')[0] : note.filename
    const noteDate = note.date ? note.date.toISOString().split('T')[0] : null
    const noteRef = serializeNote(note)
    result.push(...withSub.map(t => ({
      ...t,
      note: noteRef,
      noteName: dateStr,
      noteDate,
    })))
  }
  return result
}

// --------------- PROJECT LIST ---------------

function getProjectsForRole(folderName, noteCache, tasks) {
  const roleFolderPrefix = `${getRolesParentFolder()}/${folderName}/`
  const projectNotes = noteCache ? noteCache.projectNotes : (DataStore.projectNotes || [])
  const roleNotes = projectNotes.filter(n => n.filename.startsWith(roleFolderPrefix))

  const projects = roleNotes.map(n => {
    const title = n.title || n.filename
    return {
      filename: n.filename,
      title,
      taskCount: tasks.filter(t => t.note && t.note.filename === n.filename).length,
      isSingleActions: title.toLowerCase().includes('single actions'),
    }
  })

  projects.sort((a, b) => {
    if (a.isSingleActions && !b.isSingleActions) return -1
    if (b.isSingleActions && !a.isSingleActions) return 1
    return a.title.localeCompare(b.title)
  })

  return projects.map(p => ({ filename: p.filename, title: p.title, taskCount: p.taskCount }))
}

// --------------- BUILD & SHOW PANEL ---------------

async function buildAndShowPanel(opts = {}) {
  const initialTab    = opts.initialTab  || 'role-focus'
  const forcedRole    = opts.currentRole || null
  const forcedLookback = opts.lookback   !== undefined ? opts.lookback : null

  const settings = DataStore.settings || {}
  const showSubContentByDefault = settings.showSubContentByDefault === true
  const defaultLookback = settings.defaultLookbackDays !== undefined
    ? Number(settings.defaultLookbackDays)
    : 30
  const lookback = forcedLookback !== null ? forcedLookback : defaultLookback
  const overdueColor = settings.overdueColor || '#FF3B30'
  const clearRoles = settings.clearRoles === true || settings.clearRoles === 'true'
  const clearTags  = settings.clearTags  === true || settings.clearTags  === 'true'
  const clearDates = settings.clearDates === true || settings.clearDates === 'true'
  const hideTags   = Array.isArray(settings.hideTags) ? settings.hideTags : (typeof settings.hideTags === 'string' ? settings.hideTags.split(',').map(s => s.trim()).filter(Boolean) : ['waiting'])
  const hideFutureDays = settings.hideFutureDays !== undefined ? Number(settings.hideFutureDays) : 7

  console.log('Step 1: raw settings = ' + JSON.stringify(settings))
  console.log('Step 1: parsed clearRoles=' + clearRoles + ' clearTags=' + clearTags + ' clearDates=' + clearDates + ' overdueColor=' + overdueColor)

  const roles = getRolesFromFolders()
  const savedRole = getLastSelectedRole()
  const currentRole = forcedRole || (roles.some(r => r.folderName === savedRole) ? savedRole : null) || roles[0]?.folderName || null
  setLastSelectedRole(currentRole)
  console.log('Step 2: roles derived, count=' + roles.length + ' savedRole=' + savedRole + ' currentRole=' + currentRole)

  // Fetch notes once, pre-filtered to the relevant working set.
  // Project notes: only notes inside the Roles folder (ignore rest of vault).
  // Calendar notes: only within the lookback window (inbox only ever scans these).
  const rolesParentFolder = getRolesParentFolder()
  const lookbackCutoff = new Date()
  lookbackCutoff.setDate(lookbackCutoff.getDate() - (lookback > 0 ? lookback : 36500))
  const noteCache = {
    projectNotes:  (DataStore.projectNotes  || []).filter(n => n.filename.startsWith(rolesParentFolder + '/')),
    calendarNotes: lookback > 0
      ? (DataStore.calendarNotes || []).filter(n => n.date && n.date >= lookbackCutoff)
      : (DataStore.calendarNotes || []),
  }
  console.log('Step 3: notes filtered, projectNotes=' + noteCache.projectNotes.length + ' calendarNotes=' + noteCache.calendarNotes.length)

  // Load ONLY the active role's tasks on startup.
  // Inbox tasks are deferred — fetched when user first clicks Missing Roles tab.
  const roleTasks = currentRole ? getTasksForRole(currentRole, noteCache) : []
  const roleProjects = currentRole ? getProjectsForRole(currentRole, noteCache, roleTasks) : []
  console.log('Step 4: role tasks fetched, count=' + roleTasks.length + ' projects=' + roleProjects.length)

  // Scan ALL roles for counts, keyed by displayName for pill lookup
  const roleCounts = {}
  roles.forEach(role => {
    roleCounts[role.displayName] = role.folderName === currentRole
      ? roleTasks.length
      : getTasksForRole(role.folderName, noteCache).length
  })
  console.log('Step 4b: roleCounts=' + JSON.stringify(roleCounts))

  console.log('Step 5: building initialData')
  const initialData = {
    roles,
    initialTab,
    currentRole,
    roleTasks,
    roleProjects,
    projectPanelWidth: getProjectPanelWidth(),
    inboxTasks: [],   // deferred — loaded on first Missing Roles tab click
    inboxLoaded: false,
    lookback,
    showSubContentByDefault,
    overdueColor,
    clearRoles,
    clearTags,
    clearDates,
    hideTags,
    hideFutureDays,
    roleCounts,
    flagsOnTop: getFlagsOnTop(),
  }
  console.log('Step 6: initialData ready, building HTML')

  // Panel HTML inlined — avoids file loading issues in NotePlan
  const html = `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>Role Focus</title>
  <!-- window.INITIAL_DATA is injected here by script.js before the panel is shown -->
  <style>
    /* --------------------------------------------------------
       TOKENS
    -------------------------------------------------------- */
    :root {
      --bg:              #ffffff;
      --bg-secondary:    #f5f5f7;
      --bg-hover:        #ebebed;
      --text:            #1a1a1a;
      --text-secondary:  #888888;
      --text-placeholder:#aaaaaa;
      --border:          #e0e0e0;
      --accent:          #007AFF;
      --pill-bg:         #e8e8ea;
      --pill-active-bg:  #007AFF;
      --pill-active-text:#ffffff;
      --tag-bg:          #eef4ff;
      --checkbox-border: #c8c8cc;
      --sub-bg:          #f9f9fb;
      --row-min-height:  44px;
      --overdue-color:   #FF3B30;
      --flag-color:      #FF9500;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg:              #1c1c1e;
        --bg-secondary:    #2c2c2e;
        --bg-hover:        #3a3a3c;
        --text:            #f2f2f7;
        --text-secondary:  #8e8e93;
        --text-placeholder:#636366;
        --border:          #38383a;
        --accent:          #0a84ff;
        --pill-bg:         #3a3a3c;
        --pill-active-bg:  #0a84ff;
        --pill-active-text:#ffffff;
        --tag-bg:          #1c2d4a;
        --checkbox-border: #48484a;
        --sub-bg:          #232325;
      }
    }

    /* --------------------------------------------------------
       RESET
    -------------------------------------------------------- */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    /* --------------------------------------------------------
       BASE
    -------------------------------------------------------- */
    html, body {
      height: 100%;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
      line-height: 1.4;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* --------------------------------------------------------
       TAB BAR
    -------------------------------------------------------- */
    .tab-bar {
      display: flex;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      flex-shrink: 0;
    }

    .tab-btn {
      flex: 1;
      padding: 14px 16px;
      border: none;
      background: none;
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: color 0.12s, border-color 0.12s;
      min-height: var(--row-min-height);
    }

    .tab-btn.active {
      color: var(--accent);
      border-bottom-color: var(--accent);
    }

    /* --------------------------------------------------------
       TAB CONTENT
    -------------------------------------------------------- */
    .tab-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* --------------------------------------------------------
       ROLE PILLS
    -------------------------------------------------------- */
    .role-pill {
      display: inline-flex;
      align-items: center;
      padding: 6px 14px;
      border-radius: 100px;
      background: var(--pill-bg);
      color: var(--text);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      min-height: 32px;
      transition: background 0.12s, color 0.12s;
    }

    .role-pill.active {
      background: var(--pill-active-bg);
      color: var(--pill-active-text);
    }

    /* --------------------------------------------------------
       CONTROLS (lookback toggle row)
    -------------------------------------------------------- */
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .lookback-toggle {
      display: flex;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
    }

    .lookback-btn {
      padding: 7px 16px;
      border: none;
      background: var(--bg-secondary);
      color: var(--text-secondary);
      font-size: 13px;
      cursor: pointer;
      min-height: 36px;
      transition: background 0.12s, color 0.12s;
    }

    .lookback-btn + .lookback-btn {
      border-left: 1px solid var(--border);
    }

    .lookback-btn.active {
      background: var(--accent);
      color: #fff;
    }

    /* --------------------------------------------------------
       FILTER BAR — see new definition below with sort button
    -------------------------------------------------------- */

    /* --------------------------------------------------------
       TASK LIST
    -------------------------------------------------------- */
    .task-list {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    /* --------------------------------------------------------
       TASK ROW
    -------------------------------------------------------- */
    .task-row {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid var(--border);
      transition: opacity 0.25s;
    }

    .task-row:last-child { border-bottom: none; }

    .task-row.fading {
      opacity: 0;
    }

    .task-main {
      display: flex;
      align-items: flex-start;
      padding: 10px 16px;
      gap: 10px;
      min-height: var(--row-min-height);
    }

    .task-main:hover { background: var(--bg-hover); }

    /* Checkbox */
    .task-checkbox {
      width: 20px;
      height: 20px;
      min-width: 20px;
      border: 2px solid var(--checkbox-border);
      border-radius: 50%;
      cursor: pointer;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: border-color 0.12s, background 0.12s;
    }

    .task-checkbox:hover { border-color: var(--accent); }

    .task-checkbox.done {
      background: var(--accent);
      border-color: var(--accent);
    }

    .task-checkbox.done::after {
      content: '';
      display: block;
      width: 5px;
      height: 9px;
      border: 2px solid #fff;
      border-top: none;
      border-left: none;
      transform: rotate(45deg) translateY(-1px);
    }

    /* Task body */
    .task-body {
      flex: 1;
      min-width: 0;
    }

    .task-text {
      color: var(--text);
      word-break: break-word;
      cursor: pointer;
      user-select: none;
    }

    .task-row.task-done .task-text {
      text-decoration: line-through;
      color: var(--text-secondary);
    }

    .task-text-edit {
      width: 100%;
      background: var(--bg-secondary);
      border: 1px solid var(--accent);
      border-radius: 4px;
      color: var(--text);
      font-size: 14px;
      font-family: inherit;
      padding: 2px 6px;
      outline: none;
      line-height: 1.4;
    }

    .task-meta {
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 3px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* Task action buttons */
    .task-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .expand-btn, .expand-spacer {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
    }
    .expand-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--text-secondary);
      opacity: 0.5;
      border-radius: 4px;
      border: none;
      background: none;
      font-size: 10px;
      transition: transform 0.15s, color 0.12s, opacity 0.12s;
      line-height: 1;
      padding: 0;
    }
    .expand-spacer { display: inline-block; }

    .expand-btn.open { transform: rotate(90deg); }
    .expand-btn:hover { color: var(--text); opacity: 0.8; }

    .action-btn {
      font-size: 12px;
      color: var(--accent);
      border: 1px solid var(--border);
      border-radius: 6px;
      background: none;
      padding: 4px 9px;
      cursor: pointer;
      white-space: nowrap;
      min-height: 28px;
      font-family: inherit;
      transition: background 0.12s;
    }

    .action-btn:hover { background: var(--tag-bg); }

    /* --------------------------------------------------------
       INLINE INPUTS (tag entry, role assign)
    -------------------------------------------------------- */
    .inline-input-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px 8px 46px;
      background: var(--sub-bg);
      border-top: 1px solid var(--border);
    }

    .inline-input {
      flex: 1;
      max-width: 220px;
      padding: 5px 10px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.12s;
    }

    .inline-input:focus { border-color: var(--accent); }

    .inline-confirm {
      padding: 5px 11px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      min-height: 30px;
    }

    .inline-cancel {
      padding: 5px 10px;
      background: none;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      min-height: 30px;
    }

    /* --------------------------------------------------------
       SUB-CONTENT
    -------------------------------------------------------- */
    .sub-content {
      display: none;
      padding: 6px 16px 8px 46px;
      background: var(--sub-bg);
      border-top: 1px solid var(--border);
    }

    .sub-content.visible { display: block; }

    .sub-item {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      padding: 2px 0;
    }

    .sub-item-quote {
      border-left: 3px solid var(--border);
      padding-left: 8px;
      font-style: italic;
    }

    /* --------------------------------------------------------
       EMPTY STATE
    -------------------------------------------------------- */
    .empty-state {
      padding: 56px 24px;
      text-align: center;
    }

    .empty-state-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }

    .empty-state-body {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* --------------------------------------------------------
       OVERDUE
    -------------------------------------------------------- */
    .task-overdue {
      border-left: 3px solid var(--overdue-color);
    }

    .task-overdue .task-text {
      color: var(--overdue-color);
    }

    /* --------------------------------------------------------
       FLAGGED
    -------------------------------------------------------- */
    .task-flagged {
      border-left: 3px solid var(--flag-color);
    }

    .task-flagged .task-text {
      color: var(--flag-color);
    }

    /* --------------------------------------------------------
       PILL BADGE
    -------------------------------------------------------- */
    .pill-badge {
      margin-left: 5px;
      font-size: 11px;
      font-weight: 400;
      opacity: 0.7;
    }

    .role-pill.active .pill-badge {
      opacity: 0.85;
    }

    /* --------------------------------------------------------
       PILLS ROW WITH TOGGLE
    -------------------------------------------------------- */
    .role-pills {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .pills-inner {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }

    .collapsed-role-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      align-self: center;
    }

    .pills-toggle-btn {
      flex-shrink: 0;
      font-size: 12px;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      background: none;
      padding: 4px 9px;
      cursor: pointer;
      white-space: nowrap;
      min-height: 28px;
      font-family: inherit;
      transition: background 0.12s;
      align-self: flex-start;
    }

    .pills-toggle-btn:hover { background: var(--bg-hover); }

    /* --------------------------------------------------------
       FILTER BAR WITH SORT
    -------------------------------------------------------- */
    .filter-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .filter-input {
      flex: 1;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.12s;
    }

    .filter-input::placeholder { color: var(--text-placeholder); }
    .filter-input:focus         { border-color: var(--accent); }

    .sort-btn {
      flex-shrink: 0;
      font-size: 12px;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 6px;
      background: none;
      padding: 6px 10px;
      cursor: pointer;
      white-space: nowrap;
      min-height: 34px;
      font-family: inherit;
      transition: background 0.12s, color 0.12s;
    }

    .sort-btn:hover { background: var(--bg-hover); }
    .sort-btn.active { color: var(--accent); border-color: var(--accent); }

    /* --------------------------------------------------------
       FILTERS DROPDOWN
    -------------------------------------------------------- */
    .filters-dropdown {
      padding: 10px 16px;
      background: var(--bg-secondary);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .filter-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text);
    }

    .filter-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      cursor: pointer;
      flex-shrink: 0;
    }

    .filter-row input[type="number"] {
      width: 50px;
      padding: 4px 6px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      text-align: center;
    }

    .filter-row input[type="number"]:focus {
      border-color: var(--accent);
    }

    .filter-row label {
      cursor: pointer;
      user-select: none;
    }

    /* --------------------------------------------------------
       TAB BODY (two-column layout on Role Focus tab)
    -------------------------------------------------------- */
    .tab-body {
      display: flex;
      flex-direction: row;
      flex: 1;
      overflow: hidden;
    }

    .task-list-column {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      min-width: 0;
    }

    .project-panel {
      width: 260px;
      min-width: 140px;
      max-width: 400px;
      border-left: 1px solid var(--border);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      flex-shrink: 0;
    }

    .project-resize-handle {
      width: 5px;
      flex-shrink: 0;
      cursor: col-resize;
      background: transparent;
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      transition: background 0.12s, border-color 0.12s;
      user-select: none;
    }

    .project-resize-handle:hover,
    .project-resize-handle.dragging {
      background: var(--bg-hover);
      border-left-color: var(--border);
      border-right-color: var(--border);
    }

    .project-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 12px;
      cursor: pointer;
      font-size: 13px;
      min-height: 36px;
      border-bottom: 1px solid var(--border);
      user-select: none;
    }

    .project-row:hover {
      background: var(--bg-hover);
    }

    .project-row.active {
      background: var(--tag-bg);
      color: var(--accent);
      font-weight: 500;
    }

    .project-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 8px;
    }

    .project-count {
      font-size: 11px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .project-row.active .project-count {
      color: var(--accent);
    }

    .project-select {
      flex-shrink: 0;
      padding: 6px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: var(--bg-secondary);
      color: var(--text);
      font-size: 12px;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      min-height: 34px;
      max-width: 140px;
    }

    .project-select:focus { border-color: var(--accent); }

    /* --------------------------------------------------------
       ADD TASK MODAL
    -------------------------------------------------------- */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    .modal {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      width: 90%;
      max-width: 420px;
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .modal-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 14px;
    }

    .modal-field {
      margin-bottom: 12px;
    }

    .modal-label {
      display: block;
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: 4px;
    }

    .modal-input, .modal-select {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-secondary);
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.12s;
    }

    .modal-input:focus, .modal-select:focus {
      border-color: var(--accent);
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
    }

    .modal-btn-primary {
      padding: 8px 18px;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 13px;
      font-family: inherit;
      font-weight: 500;
      cursor: pointer;
      min-height: 34px;
    }

    .modal-btn-primary:disabled {
      opacity: 0.5;
      cursor: default;
    }

    .modal-btn-cancel {
      padding: 8px 18px;
      background: none;
      color: var(--text-secondary);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      min-height: 34px;
    }

    .modal-btn-cancel:hover { background: var(--bg-hover); }
  </style>
</head>
<body>
  <div id="app" style="display:contents"></div>

  <script>
    // ==========================================================
    // STATE
    // ==========================================================
    const state = {
      activeTab: 'role-focus',
      roles: [],           // [{ folderName, displayName, mentionName }]
      currentRole: null,   // folderName string
      roleTasks: [],
      inboxTasks: [],
      lookback: 30,
      filterText: '',
      showSubContentByDefault: false,
      sortMode: 'none',    // 'none' | 'asc' | 'desc'
      flagsOnTop: false,   // persisted via DataStore preference
      pillsCollapsed: false,
      flaggedTasks: [],    // cross-role flagged hit-list
      flaggedLoaded: false,
      overdueColor: '#FF3B30',
      clearRoles: true,
      clearTags: false,
      clearDates: false,
      roleCounts: {},      // { folderName: count }
      inboxLoaded: false,
      hideTags: [],        // tags to hide when toggle is active
      hideTagsActive: false,
      hideFutureActive: false,
      hideFutureDays: 7,
      filtersOpen: false,
      modalNotes: null,    // notes list for add-task modal (null = not loaded)
      projectList: [],     // [{ filename, title, taskCount }] for current role
      selectedProjects: new Set(), // filenames of selected projects (empty = All)
      isMobileView: false, // updated on init + resize
      projectPanelWidth: 260, // px, persisted via plugin preference
    }

    const PROJECT_PANEL_MIN_WIDTH = 140
    const PROJECT_PANEL_MAX_WIDTH = 400

    // ==========================================================
    // PLUGIN COMMUNICATION
    // ==========================================================
    function sendToPlugin(functionName, params) {
      console.log('sendToPlugin: ' + functionName)
      const argsJson = JSON.stringify(JSON.stringify({functionName, params}))
      const pluginId = JSON.stringify(window.PLUGIN_ID)
      const code = '(async function() { try {' +
        'await DataStore.invokePluginCommandByName("roleHTMLMessage", ' + pluginId + ', [' + argsJson + ']);' +
        '} catch(e) { console.log("IIFE error: " + e.message); } })()'
      window.webkit.messageHandlers.jsBridge.postMessage({
        code: code,
        onHandle: '',
        id: '1'
      })
    }

    window.onPluginMessage = function(data) {
      console.log('onPluginMessage: type=' + (data && data.type))
      if (!data || !data.type) return
      if (data.type === 'roleData') {
        state.currentRole = data.roleName
        state.roleTasks   = data.tasks || []
        state.projectList = data.projects || []
        state.selectedProjects = new Set()
        // Update count badge — roleCounts is keyed by displayName
        const refreshedRole = state.roles.find(r => r.folderName === data.roleName)
        if (refreshedRole) state.roleCounts[refreshedRole.displayName] = (data.tasks || []).length
        state.filterText  = ''
        render()
      } else if (data.type === 'noteList') {
        state.modalNotes = data.notes || []
        updateModalNoteList()
        return
      } else if (data.type === 'flagResult') {
        const lists = [state.roleTasks, state.inboxTasks, state.flaggedTasks]
        lists.forEach(list => {
          const task = list.find(t => t.lineIndex === data.lineIndex && t.note && t.note.filename === data.noteFilename)
          if (task) {
            task.rawContent = data.newContent
            task.taskContent = data.newContent
          }
        })
        // If the task was just unflagged, drop it from the hit-list immediately
        if (data.flagged === false) {
          state.flaggedTasks = state.flaggedTasks.filter(t =>
            !(t.lineIndex === data.lineIndex && t.note && t.note.filename === data.noteFilename))
        } else if (data.flagged === true && state.activeTab !== 'flagged') {
          // A task was just flagged from another tab — invalidate the cache so
          // the hit-list refreshes the next time the Flagged tab is opened.
          state.flaggedLoaded = false
        }
        render()
        return
      } else if (data.type === 'flaggedData') {
        state.flaggedTasks  = data.tasks || []
        state.flaggedLoaded = true
        render()
        return
      } else if (data.type === 'addTaskResult') {
        if (data.success && data.newTask) {
          state.roleTasks.unshift(data.newTask)
          const refreshedRole = state.roles.find(r => r.folderName === state.currentRole)
          if (refreshedRole) state.roleCounts[refreshedRole.displayName] = state.roleTasks.length
          const noteFilename = data.newTask.note && data.newTask.note.filename
          const proj = state.projectList.find(p => p.filename === noteFilename)
          if (proj) proj.taskCount += 1
        }
        closeAddTaskModal()
        render()
        return
      } else if (data.type === 'inboxData') {
        state.inboxTasks  = data.tasks || []
        state.lookback    = data.lookback
        state.inboxLoaded = true
        state.filterText  = ''
        render()
      }
    }

    // ==========================================================
    // INIT
    // ==========================================================
    function init() {
      const data = window.INITIAL_DATA || {}
      state.roles                = data.roles               || []
      state.activeTab            = data.initialTab          || 'role-focus'
      state.currentRole          = data.currentRole         || (state.roles[0]?.folderName || null)
      state.roleTasks            = data.roleTasks           || []
      state.inboxTasks           = data.inboxTasks          || []
      state.lookback             = data.lookback            !== undefined ? data.lookback : 30
      state.showSubContentByDefault = data.showSubContentByDefault || false
      state.overdueColor         = data.overdueColor        || '#FF3B30'
      state.clearRoles           = data.clearRoles          !== false
      state.clearTags            = data.clearTags           === true
      state.clearDates           = data.clearDates          === true
      state.roleCounts           = data.roleCounts          || {}
      state.inboxLoaded          = data.inboxLoaded         === true
      state.hideTags             = data.hideTags            || []
      state.hideTagsActive       = false
      state.hideFutureActive     = false
      state.hideFutureDays       = data.hideFutureDays     || 7
      state.flagsOnTop           = data.flagsOnTop          === true
      state.projectList          = data.roleProjects       || []
      state.selectedProjects     = new Set()
      state.isMobileView         = isMobile()
      const savedWidth           = Number(data.projectPanelWidth)
      if (savedWidth >= PROJECT_PANEL_MIN_WIDTH && savedWidth <= PROJECT_PANEL_MAX_WIDTH) {
        state.projectPanelWidth = savedWidth
      }
      window.addEventListener('resize', handleResize)
      render()
    }

    function isMobile() {
      return window.innerWidth < 600
    }

    let resizeTimer = null
    function handleResize() {
      clearTimeout(resizeTimer)
      resizeTimer = setTimeout(() => {
        const nowMobile = isMobile()
        if (nowMobile !== state.isMobileView) {
          state.isMobileView = nowMobile
          // Mobile dropdown can't express multi-select — collapse to All.
          if (nowMobile && state.selectedProjects.size > 1) {
            state.selectedProjects.clear()
          }
          render()
        }
      }, 120)
    }

    // ==========================================================
    // RENDER
    // ==========================================================
    function render() {
      const app = document.getElementById('app')
      app.innerHTML = buildAppHTML()
      attachListeners()
    }

    function buildAppHTML() {
      let tabBody
      if (state.activeTab === 'role-focus')   tabBody = buildRoleFocusTab()
      else if (state.activeTab === 'flagged') tabBody = buildFlaggedTab()
      else                                    tabBody = buildInboxTab()
      return \`
        <div class="tab-bar">
          <button class="tab-btn \${state.activeTab === 'role-focus'    ? 'active' : ''}" data-tab="role-focus">Role Focus</button>
          <button class="tab-btn \${state.activeTab === 'flagged'       ? 'active' : ''}" data-tab="flagged">Flagged</button>
          <button class="tab-btn \${state.activeTab === 'inbox-triage'  ? 'active' : ''}" data-tab="inbox-triage">Missing Roles</button>
        </div>
        <div class="tab-content">
          \${tabBody}
        </div>
      \`
    }

    // ---------- Role Focus tab ----------

    function buildRoleFocusTab() {
      const currentRoleObj = state.roles.find(r => r.folderName === state.currentRole)
      const currentDisplayName = currentRoleObj ? currentRoleObj.displayName : (state.currentRole || '')

      let pillsHtml
      if (!state.roles.length) {
        pillsHtml = \`<span style="color:var(--text-secondary);font-size:13px">No folders found. Create a top-level folder in NotePlan to define a role.</span>\`
      } else if (state.pillsCollapsed) {
        pillsHtml = \`<span class="collapsed-role-label">\${esc(currentDisplayName)}</span>\`
      } else {
        pillsHtml = state.roles.map(r => {
          const count = state.roleCounts[r.displayName] || 0
          const isActive = r.folderName === state.currentRole
          const badgeStyle = count === 0 ? 'opacity:0.45' : ''
          return \`<button class="role-pill \${isActive ? 'active' : ''}" data-role="\${esc(r.folderName)}">
            \${esc(r.displayName)}<span class="pill-badge" style="\${badgeStyle}">&times;\${count}</span>
          </button>\`
        }).join('')
      }

      const sortLabel = state.sortMode === 'asc' ? 'Date ↑' : state.sortMode === 'desc' ? 'Date ↓' : 'Date ↕'
      const filtered = filteredAndSortedTasks(state.roleTasks)

      const anyFilterActive = state.hideTagsActive || state.hideFutureActive
      const showProjectPanel = !state.isMobileView && state.projectList.length > 0
      const showProjectSelect = state.isMobileView && state.projectList.length > 0

      const taskListHtml = filtered.length
        ? filtered.map((t, i) => buildTaskRow(t, i, 'role')).join('')
        : buildEmptyState(
            state.currentRole ? 'No open tasks' : 'No role selected',
            state.currentRole
              ? \`No open tasks found for \${currentDisplayName}.\`
              : 'Select a role above to see its tasks.'
          )

      return \`
        <div class="role-pills">
          <div class="pills-inner">\${pillsHtml}</div>
          <button class="pills-toggle-btn" id="pills-toggle">\${state.pillsCollapsed ? 'Roles ▲' : 'Roles ▼'}</button>
        </div>
        <div class="filter-bar">
          <input class="filter-input" id="filter-input" type="text" placeholder="Filter tasks…" value="\${esc(state.filterText)}">
          \${showProjectSelect ? buildProjectSelect() : ''}
          <button class="sort-btn\${state.flagsOnTop ? ' active' : ''}" id="flag-sort-btn" title="Flagged tasks first">&#9873;</button>
          <button class="sort-btn\${state.sortMode !== 'none' ? ' active' : ''}" id="sort-btn">\${sortLabel}</button>
          <button class="action-btn" id="add-task-btn">+ Task</button>
          <button class="sort-btn\${anyFilterActive ? ' active' : ''}" id="filters-btn">Filters &#9660;</button>
        </div>
        \${state.filtersOpen ? buildFiltersDropdown() : ''}
        <div class="tab-body">
          <div class="task-list-column" id="task-list">
            \${taskListHtml}
          </div>
          \${showProjectPanel ? \`<div class="project-resize-handle" id="project-resize-handle" title="Drag to resize"></div>\` + buildProjectPanel() : ''}
        </div>
      \`
    }

    function buildProjectPanel() {
      const totalCount = state.roleTasks.length
      const allActive = state.selectedProjects.size === 0
      const rows = [
        \`<div class="project-row \${allActive ? 'active' : ''}" data-project="">
          <span class="project-name">All</span>
          <span class="project-count">&times;\${totalCount}</span>
        </div>\`
      ]
      state.projectList.forEach(p => {
        const isActive = state.selectedProjects.has(p.filename)
        rows.push(\`<div class="project-row \${isActive ? 'active' : ''}" data-project="\${esc(p.filename)}">
          <span class="project-name" title="\${esc(p.title)}">\${esc(p.title)}</span>
          <span class="project-count">&times;\${p.taskCount}</span>
        </div>\`)
      })
      const w = state.projectPanelWidth
      return \`<div class="project-panel" id="project-panel" style="width:\${w}px;min-width:\${w}px;max-width:\${w}px">\${rows.join('')}</div>\`
    }

    function buildProjectSelect() {
      const selected = state.selectedProjects.size === 1
        ? [...state.selectedProjects][0]
        : ''
      const options = [\`<option value="">All projects (\${state.roleTasks.length})</option>\`]
      state.projectList.forEach(p => {
        const sel = p.filename === selected ? ' selected' : ''
        options.push(\`<option value="\${esc(p.filename)}"\${sel}>\${esc(p.title)} (\${p.taskCount})</option>\`)
      })
      return \`<select class="project-select" id="project-select">\${options.join('')}</select>\`
    }

    // ---------- Missing Roles tab ----------

    function buildInboxTab() {
      const filtered = filteredAndSortedTasks(state.inboxTasks)

      const taskListHtml = !state.inboxLoaded
        ? \`<div class="empty-state"><div class="empty-state-title">Loading…</div><div class="empty-state-body">Scanning calendar notes for unassigned tasks.</div></div>\`
        : (filtered.length
            ? filtered.map((t, i) => buildTaskRow(t, i, 'inbox')).join('')
            : buildEmptyState('No unassigned tasks', 'All tasks in the selected range have a role assigned.'))

      const anyFilterActive = state.hideTagsActive || state.hideFutureActive

      return \`
        <div class="controls">
          <div class="lookback-toggle">
            <button class="lookback-btn \${state.lookback === 30 ? 'active' : ''}" data-lookback="30">30 Days</button>
            <button class="lookback-btn \${state.lookback === 0  ? 'active' : ''}" data-lookback="0">All Time</button>
          </div>
        </div>
        <div class="filter-bar">
          <input class="filter-input" id="filter-input" type="text" placeholder="Filter tasks…" value="\${esc(state.filterText)}">
          <button class="sort-btn\${anyFilterActive ? ' active' : ''}" id="filters-btn">Filters &#9660;</button>
        </div>
        \${state.filtersOpen ? buildFiltersDropdown() : ''}
        <div class="task-list" id="task-list">
          \${taskListHtml}
        </div>
      \`
    }

    // ---------- Flagged tab ----------

    function buildFlaggedTab() {
      const filtered = filterFlaggedTasks(state.flaggedTasks)
      let taskListHtml
      if (!state.flaggedLoaded) {
        taskListHtml = \`<div class="empty-state"><div class="empty-state-title">Loading…</div><div class="empty-state-body">Scanning all roles for flagged tasks.</div></div>\`
      } else if (filtered.length) {
        taskListHtml = filtered.map((t, i) => buildTaskRow(t, i, 'flagged')).join('')
      } else {
        taskListHtml = buildEmptyState('No flagged tasks', 'Nothing flagged across your roles is due today or undated. Flag a task with the ⚑ button to add it here.')
      }
      return \`
        <div class="filter-bar">
          <input class="filter-input" id="filter-input" type="text" placeholder="Filter flagged tasks…" value="\${esc(state.filterText)}">
        </div>
        <div class="task-list" id="task-list">
          \${taskListHtml}
        </div>
      \`
    }

    function filterFlaggedTasks(tasks) {
      if (!state.filterText) return tasks
      const q = state.filterText.toLowerCase()
      return tasks.filter(t => t.taskContent && t.taskContent.toLowerCase().includes(q))
    }

    // ---------- Task row ----------

    function buildTaskRow(taskData, index, mode) {
      const { taskContent, rawContent, lineIndex, subContent = [], note, noteName, roleDisplayName, projectLabel } = taskData
      const hasSubContent = subContent.length > 0
      const expanded      = state.showSubContentByDefault
      const overdue       = isOverdue(taskData)
      const flagged       = isFlagged(rawContent || taskContent || '')

      // Encode noteRef as a data attribute (single-quoted JSON, apostrophes escaped)
      const noteAttr = JSON.stringify(note).replace(/'/g, '&#39;')

      let rowClasses = 'task-row'
      if (flagged) rowClasses += ' task-flagged'
      if (overdue) rowClasses += ' task-overdue'

      const flagStyle = flagged ? ' style="color: var(--flag-color)"' : ''

      // Meta line: flagged tab shows "Role · Project"; other tabs show source note name
      let metaText = noteName || ''
      if (mode === 'flagged') {
        const role = roleDisplayName || ''
        const proj = projectLabel    || noteName || ''
        metaText = role && proj ? role + ' · ' + proj : (role || proj)
      }

      // Action buttons differ per mode. Flagged tab is intentionally minimal:
      // the flag button doubles as unflag.
      let actionsHtml
      if (mode === 'flagged') {
        actionsHtml = \`<button class="action-btn" data-action="flag-task" title="Unflag"\${flagStyle}>&#9873;</button>\`
      } else {
        const roleBtn = mode === 'role'
          ? \`<button class="action-btn" data-action="show-assign-role">+ role</button>\`
          : \`<button class="action-btn" data-action="show-assign">Assign Role</button>\`
        actionsHtml = \`
              <button class="action-btn" data-action="show-tag">+ tag</button>
              \${roleBtn}
              <button class="action-btn" data-action="flag-task"\${flagStyle}>&#9873;</button>
              <button class="action-btn" data-action="clear-task">clear</button>\`
      }

      return \`
        <div class="\${rowClasses}" data-index="\${index}" data-line="\${lineIndex}" data-note='\${noteAttr}'>
          <div class="task-main">
            <div class="task-checkbox" title="Mark complete"></div>
            \${hasSubContent
              ? \`<button class="expand-btn \${expanded ? 'open' : ''}" title="\${expanded ? 'Collapse' : 'Expand'} notes">&#9654;</button>\`
              : \`<span class="expand-spacer"></span>\`}
            <div class="task-body">
              <div class="task-text" title="Click to open · Double-click to edit">\${esc(displayContent(taskContent))}</div>
              <div class="task-meta">\${esc(metaText)}</div>
            </div>
            <div class="task-actions">
              \${actionsHtml}
            </div>
          </div>
          \${hasSubContent ? \`
            <div class="sub-content \${expanded ? 'visible' : ''}">
              \${subContent.map(s => buildSubItem(s)).join('')}
            </div>\` : ''}
        </div>
      \`
    }

    function buildSubItem(sub) {
      const isQuote = sub.content.startsWith('> ')
      const text    = isQuote ? sub.content.slice(2) : sub.content
      return \`<div class="sub-item \${isQuote ? 'sub-item-quote' : ''}">\${renderWithLinks(text)}</div>\`
    }

    function buildEmptyState(title, body) {
      return \`
        <div class="empty-state">
          <div class="empty-state-title">\${esc(title)}</div>
          <div class="empty-state-body">\${esc(body)}</div>
        </div>\`
    }

    function isFlagged(rawContent) {
      return rawContent ? rawContent.startsWith('! ') : false
    }

    // Pass-through for display — dates (>YYYY-MM-DD) are kept visible.
    function displayContent(content) {
      return content
    }

    function extractScheduledDate(content) {
      if (!content) return null
      const match = content.match(/>(\\d{4}-\\d{2}-\\d{2})/)
      if (!match) return null
      const [y, m, d] = match[1].split('-').map(Number)
      return new Date(y, m - 1, d)
    }

    // Priority: explicit >YYYY-MM-DD markup > note date (calendar notes) > no date
    function resolveTaskDate(task) {
      const explicit = extractScheduledDate(task.rawContent || task.taskContent || '')
      if (explicit) return explicit
      if (task.noteDate) {
        const [y, m, d] = task.noteDate.split('-').map(Number)
        return new Date(y, m - 1, d)
      }
      return null
    }

    function isOverdue(task) {
      const date = resolveTaskDate(task)
      if (!date) return false
      const endOfToday = new Date()
      endOfToday.setHours(23, 59, 59, 999)
      return date <= endOfToday
    }

    function clearTaskData(content, clearRoles, clearTags, clearDates) {
      let result = content
      if (clearDates) result = result.replace(/>\\S+/g, '')
      if (clearTags)  result = result.replace(/#\\S+/g, '')
      if (clearRoles) result = result.replace(/@\\S+/g, '')
      return result.replace(/\\s{2,}/g, ' ').trim()
    }

    function filteredAndSortedTasks(tasks) {
      let result = tasks
      // 1. Text filter
      if (state.filterText) {
        const q = state.filterText.toLowerCase()
        result = result.filter(t => t.taskContent && t.taskContent.toLowerCase().includes(q))
      }
      // 1b. Project filter (Role Focus tab only)
      if (state.activeTab === 'role-focus' && state.selectedProjects.size > 0) {
        result = result.filter(t => t.note && state.selectedProjects.has(t.note.filename))
      }
      // 2. Hide tags filter
      if (state.hideTagsActive && state.hideTags.length > 0) {
        const tags = state.hideTags.map(t => t.startsWith('#') ? t.toLowerCase() : '#' + t.toLowerCase())
        result = result.filter(task => {
          const content = (task.rawContent || task.taskContent || '').toLowerCase()
          return !tags.some(tag => content.includes(tag))
        })
      }
      // 3. Hide future filter
      if (state.hideFutureActive) {
        const days = state.hideFutureDays || 7
        const cutoff = new Date()
        cutoff.setDate(cutoff.getDate() + days)
        cutoff.setHours(23, 59, 59, 999)
        result = result.filter(task => {
          const date = resolveTaskDate(task)
          if (!date) return true
          return date <= cutoff
        })
      }
      // 4. Sort
      if (state.sortMode !== 'none') {
        result = result.slice().sort((a, b) => {
          const da = resolveTaskDate(a)
          const db = resolveTaskDate(b)
          if (!da && !db) return 0
          if (!da) return 1
          if (!db) return -1
          return state.sortMode === 'asc' ? da - db : db - da
        })
      }
      // 5. Flags on top — stable partition preserves the date sort within each group
      if (state.flagsOnTop) {
        const flagged = []
        const rest = []
        for (const t of result) {
          if (isFlagged(t.rawContent || t.taskContent || '')) flagged.push(t)
          else rest.push(t)
        }
        result = flagged.concat(rest)
      }
      return result
    }

    function buildFiltersDropdown() {
      const tagList = state.hideTags.map(t => t.startsWith('#') ? t : '#' + t).join(', ')
      return \`
        <div class="filters-dropdown" id="filters-dropdown">
          \${state.hideTags.length ? \`
          <div class="filter-row">
            <input type="checkbox" id="filter-hide-tags" \${state.hideTagsActive ? 'checked' : ''}>
            <label for="filter-hide-tags">Hide tags: \${esc(tagList)}</label>
          </div>\` : ''}
          <div class="filter-row">
            <input type="checkbox" id="filter-hide-future" \${state.hideFutureActive ? 'checked' : ''}>
            <label for="filter-hide-future">Hide tasks beyond</label>
            <input type="number" id="filter-future-days" value="\${state.hideFutureDays}" min="1" max="365" \${!state.hideFutureActive ? 'disabled' : ''}>
            <span>days</span>
          </div>
        </div>
      \`
    }

    // ==========================================================
    // EVENT LISTENERS
    // ==========================================================
    function attachListeners() {
      // Tab buttons
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          state.activeTab  = btn.dataset.tab
          state.filterText = ''
          // Defer inbox fetch until user first opens the Missing Roles tab
          if (state.activeTab === 'inbox-triage' && !state.inboxLoaded) {
            render() // show loading state immediately
            sendToPlugin('handleRefreshInbox', { lookback: state.lookback })
          } else if (state.activeTab === 'flagged' && !state.flaggedLoaded) {
            render() // show loading state immediately
            sendToPlugin('handleRefreshFlagged', {})
          } else {
            render()
          }
        })
      })

      // Role pills
      document.querySelectorAll('.role-pill').forEach(pill => {
        pill.addEventListener('click', () => {
          const folderName = pill.dataset.role
          if (folderName === state.currentRole) return
          state.currentRole = folderName
          // Update active pill immediately for feel
          document.querySelectorAll('.role-pill').forEach(p =>
            p.classList.toggle('active', p.dataset.role === folderName)
          )
          sendToPlugin('handleRefreshRole', { roleName: folderName })
        })
      })

      // Pills collapse toggle
      const pillsToggle = document.getElementById('pills-toggle')
      if (pillsToggle) {
        pillsToggle.addEventListener('click', () => {
          state.pillsCollapsed = !state.pillsCollapsed
          render()
        })
      }

      // Sort toggle
      const sortBtn = document.getElementById('sort-btn')
      if (sortBtn) {
        sortBtn.addEventListener('click', () => {
          const prev = state.sortMode
          state.sortMode = state.sortMode === 'none' ? 'asc' : state.sortMode === 'asc' ? 'desc' : 'none'
          console.log('sort toggled: ' + prev + ' → ' + state.sortMode)
          render()
        })
      }

      // Flag-sort toggle (persisted)
      const flagSortBtn = document.getElementById('flag-sort-btn')
      if (flagSortBtn) {
        flagSortBtn.addEventListener('click', () => {
          state.flagsOnTop = !state.flagsOnTop
          sendToPlugin('handleSaveFlagsOnTop', { value: state.flagsOnTop })
          render()
        })
      }

      // Filters toggle
      const filtersBtn = document.getElementById('filters-btn')
      if (filtersBtn) {
        filtersBtn.addEventListener('click', () => {
          state.filtersOpen = !state.filtersOpen
          render()
        })
      }

      // Filters dropdown listeners
      const hideTagsCheck = document.getElementById('filter-hide-tags')
      if (hideTagsCheck) {
        hideTagsCheck.addEventListener('change', () => {
          state.hideTagsActive = hideTagsCheck.checked
          render()
        })
      }

      const hideFutureCheck = document.getElementById('filter-hide-future')
      if (hideFutureCheck) {
        hideFutureCheck.addEventListener('change', () => {
          state.hideFutureActive = hideFutureCheck.checked
          render()
        })
      }

      const futureDaysInput = document.getElementById('filter-future-days')
      if (futureDaysInput) {
        futureDaysInput.addEventListener('input', () => {
          const val = parseInt(futureDaysInput.value, 10)
          if (val >= 1 && val <= 365) {
            state.hideFutureDays = val
            if (state.hideFutureActive) rerenderTaskList()
          }
        })
      }

      // Add task button
      const addTaskBtn = document.getElementById('add-task-btn')
      if (addTaskBtn) {
        addTaskBtn.addEventListener('click', () => {
          if (state.currentRole) openAddTaskModal()
        })
      }

      // Lookback buttons
      document.querySelectorAll('.lookback-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          const lb = Number(btn.dataset.lookback)
          if (lb === state.lookback) return
          sendToPlugin('handleRefreshInbox', { lookback: lb })
        })
      })

      // Filter input — live filter without plugin round-trip
      const filterEl = document.getElementById('filter-input')
      if (filterEl) {
        filterEl.addEventListener('input', e => {
          state.filterText = e.target.value
          rerenderTaskList()
        })
      }

      // Project panel rows (desktop)
      document.querySelectorAll('.project-row').forEach(row => {
        row.addEventListener('click', e => {
          const filename = row.dataset.project || ''
          const isCmdClick = e.metaKey || e.ctrlKey
          handleProjectClick(filename, isCmdClick)
        })
      })

      // Project dropdown (mobile)
      const projectSelect = document.getElementById('project-select')
      if (projectSelect) {
        projectSelect.addEventListener('change', () => {
          handleProjectClick(projectSelect.value || '', false)
        })
      }

      // Project panel resize handle (desktop)
      const resizeHandle = document.getElementById('project-resize-handle')
      if (resizeHandle) {
        resizeHandle.addEventListener('mousedown', startProjectPanelResize)
      }

      attachTaskListeners()
    }

    function startProjectPanelResize(e) {
      e.preventDefault()
      const handle = document.getElementById('project-resize-handle')
      const panel = document.getElementById('project-panel')
      if (!panel) return
      handle && handle.classList.add('dragging')
      const prevCursor = document.body.style.cursor
      const prevUserSelect = document.body.style.userSelect
      document.body.style.cursor = 'col-resize'
      document.body.style.userSelect = 'none'

      const onMove = ev => {
        // Panel is anchored to the right edge of the viewport.
        const newWidth = Math.min(
          PROJECT_PANEL_MAX_WIDTH,
          Math.max(PROJECT_PANEL_MIN_WIDTH, window.innerWidth - ev.clientX)
        )
        state.projectPanelWidth = newWidth
        panel.style.width    = newWidth + 'px'
        panel.style.minWidth = newWidth + 'px'
        panel.style.maxWidth = newWidth + 'px'
      }

      const onUp = () => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
        document.body.style.cursor = prevCursor
        document.body.style.userSelect = prevUserSelect
        handle && handle.classList.remove('dragging')
        sendToPlugin('handleSaveProjectPanelWidth', { width: state.projectPanelWidth })
      }

      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    }

    function handleProjectClick(filename, isCmdClick) {
      if (!filename) {
        state.selectedProjects.clear()
        render()
        return
      }
      if (isCmdClick) {
        if (state.selectedProjects.has(filename)) {
          state.selectedProjects.delete(filename)
        } else {
          state.selectedProjects.add(filename)
        }
      } else {
        if (state.selectedProjects.size === 1 && state.selectedProjects.has(filename)) {
          state.selectedProjects.clear()
        } else {
          state.selectedProjects.clear()
          state.selectedProjects.add(filename)
        }
      }
      render()
    }

    // Re-render only the task list portion (keeps filter input focused)
    function rerenderTaskList() {
      const taskList = document.getElementById('task-list')
      if (!taskList) return
      let mode, filtered
      if (state.activeTab === 'flagged') {
        mode = 'flagged'
        filtered = filterFlaggedTasks(state.flaggedTasks)
      } else if (state.activeTab === 'role-focus') {
        mode = 'role'
        filtered = filteredAndSortedTasks(state.roleTasks)
      } else {
        mode = 'inbox'
        filtered = filteredAndSortedTasks(state.inboxTasks)
      }
      taskList.innerHTML = filtered.length
        ? filtered.map((t, i) => buildTaskRow(t, i, mode)).join('')
        : buildEmptyState('No results', 'No tasks match your filter.')
      attachTaskListeners()
    }

    function attachTaskListeners() {
      document.querySelectorAll('.task-row').forEach(row => {
        const noteRef   = JSON.parse(row.dataset.note || '{}')
        const lineIndex = Number(row.dataset.line)

        // Checkbox
        const checkbox = row.querySelector('.task-checkbox')
        if (checkbox) {
          checkbox.addEventListener('click', e => {
            e.stopPropagation()
            checkbox.classList.add('done')
            row.classList.add('task-done', 'fading')
            sendToPlugin('handleMarkTaskDone', { noteRef, lineIndex })
            setTimeout(() => row.remove(), 280)
          })
        }

        // Task text
        const taskText = row.querySelector('.task-text')
        if (taskText) {
          let clickTimer = null
          taskText.addEventListener('click', e => {
            e.stopPropagation()
            clearTimeout(clickTimer)
            clickTimer = setTimeout(() => {
              clickTimer = null
              sendToPlugin('handleOpenNote', { noteRef, lineIndex })
            }, 250)
          })
          taskText.addEventListener('dblclick', e => {
            e.stopPropagation()
            clearTimeout(clickTimer)
            clickTimer = null
            startInlineEdit(row, taskText, noteRef, lineIndex)
          })
        }

        // Expand / collapse sub-content
        const expandBtn = row.querySelector('.expand-btn')
        if (expandBtn) {
          expandBtn.addEventListener('click', e => {
            e.stopPropagation()
            e.preventDefault()
            console.log('expand-btn clicked, row index=' + row.dataset.index)
            const sub = row.querySelector('.sub-content')
            console.log('sub-content found:', !!sub)
            if (sub) {
              const nowVisible = sub.classList.toggle('visible')
              expandBtn.classList.toggle('open', nowVisible)
              expandBtn.title = nowVisible ? 'Collapse notes' : 'Expand notes'
            }
          })
        }

        // Add tag
        const tagBtn = row.querySelector('[data-action="show-tag"]')
        if (tagBtn) {
          tagBtn.addEventListener('click', e => {
            e.stopPropagation()
            showTagInput(row, noteRef, lineIndex)
          })
        }

        // Assign role (inbox mode — fades row out after assign)
        const assignBtn = row.querySelector('[data-action="show-assign"]')
        if (assignBtn) {
          assignBtn.addEventListener('click', e => {
            e.stopPropagation()
            showAssignRoleUI(row, noteRef, lineIndex, true)
          })
        }

        // + role button (role mode — appends without fading)
        const assignRoleBtn = row.querySelector('[data-action="show-assign-role"]')
        if (assignRoleBtn) {
          assignRoleBtn.addEventListener('click', e => {
            e.stopPropagation()
            showAssignRoleUI(row, noteRef, lineIndex, false)
          })
        }

        // Flag task
        const flagBtn = row.querySelector('[data-action="flag-task"]')
        if (flagBtn) {
          flagBtn.addEventListener('click', e => {
            e.stopPropagation()
            sendToPlugin('handleFlagTask', { noteRef, lineIndex })
          })
        }

        // Clear task data
        const clearBtn = row.querySelector('[data-action="clear-task"]')
        if (clearBtn) {
          clearBtn.addEventListener('click', e => {
            e.stopPropagation()
            // Read raw content from state (NOT from DOM — DOM has >dates stripped by displayContent)
            const taskList = state.activeTab === 'role-focus' ? state.roleTasks : state.inboxTasks
            const taskData = taskList.find(t => t.lineIndex === lineIndex && t.note && t.note.filename === noteRef.filename)
            const rawContent = taskData ? (taskData.rawContent || taskData.taskContent) : ''
            console.log('clear clicked: rawContent="' + rawContent + '" clearRoles=' + state.clearRoles + ' clearTags=' + state.clearTags + ' clearDates=' + state.clearDates)
            const cleaned = clearTaskData(rawContent, state.clearRoles, state.clearTags, state.clearDates)
            console.log('clear result: cleaned="' + cleaned + '" changed=' + (cleaned !== rawContent))
            if (cleaned !== rawContent) {
              const taskText = row.querySelector('.task-text')
              if (taskText) taskText.textContent = displayContent(cleaned)
              syncTaskContent(noteRef, lineIndex, cleaned)
              sendToPlugin('handleClearTask', { noteRef, lineIndex, newContent: cleaned })
            } else {
              console.log('clear: nothing to clear (no matching tokens found in raw content)')
            }
          })
        }
      })
    }

    // ==========================================================
    // INLINE EDIT
    // ==========================================================
    function startInlineEdit(row, taskTextEl, noteRef, lineIndex) {
      const original = taskTextEl.textContent

      const input = document.createElement('input')
      input.type      = 'text'
      input.className = 'task-text-edit'
      input.value     = original
      taskTextEl.replaceWith(input)
      input.focus()
      input.select()

      const commit = () => {
        const newContent = input.value.trim()
        const replacement = makeTaskTextEl(newContent, noteRef, lineIndex, row)
        input.replaceWith(replacement)
        if (newContent && newContent !== original) {
          sendToPlugin('handleEditTask', { noteRef, lineIndex, newContent })
          syncTaskContent(noteRef, lineIndex, newContent)
        }
      }

      const revert = () => {
        const replacement = makeTaskTextEl(original, noteRef, lineIndex, row)
        input.replaceWith(replacement)
      }

      input.addEventListener('blur', commit)
      input.addEventListener('keydown', e => {
        if (e.key === 'Enter')  { e.preventDefault(); input.removeEventListener('blur', commit); commit() }
        if (e.key === 'Escape') { e.preventDefault(); input.removeEventListener('blur', commit); revert() }
      })
    }

    function makeTaskTextEl(text, noteRef, lineIndex, row) {
      const el = document.createElement('div')
      el.className = 'task-text'
      el.title     = 'Click to open · Double-click to edit'
      el.textContent = text

      let clickTimer = null
      el.addEventListener('click', e => {
        e.stopPropagation()
        clearTimeout(clickTimer)
        clickTimer = setTimeout(() => {
          clickTimer = null
          sendToPlugin('handleOpenNote', { noteRef, lineIndex })
        }, 250)
      })
      el.addEventListener('dblclick', e => {
        e.stopPropagation()
        clearTimeout(clickTimer)
        clickTimer = null
        startInlineEdit(row, el, noteRef, lineIndex)
      })
      return el
    }

    function syncTaskContent(noteRef, lineIndex, newContent) {
      const lists = [state.roleTasks, state.inboxTasks, state.flaggedTasks]
      lists.forEach(list => {
        const task = list.find(t => t.lineIndex === lineIndex && t.note?.filename === noteRef?.filename)
        if (task) task.taskContent = newContent
      })
    }

    // ==========================================================
    // TAG INPUT UI
    // ==========================================================
    function showTagInput(row, noteRef, lineIndex) {
      const existing = row.querySelector('.tag-input-row')
      if (existing) { existing.remove(); return }

      const inputRow = document.createElement('div')
      inputRow.className = 'inline-input-row tag-input-row'
      inputRow.innerHTML = \`
        <input class="inline-input" type="text" placeholder="tag name (e.g. call)" autocomplete="off" spellcheck="false">
        <button class="inline-confirm">Add</button>
        <button class="inline-cancel">Cancel</button>
      \`
      insertBeforeSubContent(row, inputRow)

      const input = inputRow.querySelector('.inline-input')
      input.focus()

      const confirm = () => {
        const tag = input.value.trim().replace(/^#+/, '')
        if (tag) {
          sendToPlugin('handleAddTag', { noteRef, lineIndex, tag })
          // Optimistic: append tag text to the visible task text
          const taskText = row.querySelector('.task-text')
          if (taskText) taskText.textContent += \` #\${tag}\`
          syncTaskContent(noteRef, lineIndex,
            (row.querySelector('.task-text') || {}).textContent || '')
        }
        inputRow.remove()
      }

      inputRow.querySelector('.inline-confirm').addEventListener('click', confirm)
      inputRow.querySelector('.inline-cancel').addEventListener('click', () => inputRow.remove())
      input.addEventListener('keydown', e => {
        if (e.key === 'Enter')  { e.preventDefault(); confirm() }
        if (e.key === 'Escape') { e.preventDefault(); inputRow.remove() }
      })
    }

    // ==========================================================
    // ASSIGN ROLE UI
    // ==========================================================
    function showAssignRoleUI(row, noteRef, lineIndex, fadeOnAssign = false) {
      const existing = row.querySelector('.assign-input-row')
      if (existing) { existing.remove(); return }

      const inputRow = document.createElement('div')
      inputRow.className = 'inline-input-row assign-input-row'
      inputRow.innerHTML = \`
        <select class="inline-input" style="cursor:pointer">
          <option value="">Select a role…</option>
          \${state.roles.map(r => \`<option value="\${esc(r.mentionName)}">\${esc(r.displayName)}</option>\`).join('')}
        </select>
        <button class="inline-confirm">Assign</button>
        <button class="inline-cancel">Cancel</button>
      \`
      insertBeforeSubContent(row, inputRow)

      const select = inputRow.querySelector('select')
      select.focus()

      const confirm = () => {
        const mentionName = select.value
        if (mentionName) {
          sendToPlugin('handleAssignRole', { noteRef, lineIndex, mentionName })
          if (fadeOnAssign) {
            // Optimistic: remove from inbox list
            row.classList.add('fading')
            setTimeout(() => {
              row.remove()
              const idx = state.inboxTasks.findIndex(
                t => t.lineIndex === lineIndex && t.note?.filename === noteRef?.filename
              )
              if (idx !== -1) state.inboxTasks.splice(idx, 1)
            }, 280)
          } else {
            // Optimistic: append mention to visible task text
            const taskText = row.querySelector('.task-text')
            if (taskText) taskText.textContent = taskText.textContent + \` @\${mentionName}\`
            syncTaskContent(noteRef, lineIndex, (row.querySelector('.task-text') || {}).textContent || '')
          }
        }
        inputRow.remove()
      }

      inputRow.querySelector('.inline-confirm').addEventListener('click', confirm)
      inputRow.querySelector('.inline-cancel').addEventListener('click', () => inputRow.remove())
    }

    // ==========================================================
    // DOM HELPERS
    // ==========================================================
    function insertBeforeSubContent(row, el) {
      const sub = row.querySelector('.sub-content')
      sub ? row.insertBefore(el, sub) : row.appendChild(el)
    }

    function esc(str) {
      if (typeof str !== 'string') return ''
      return str
        .replace(/&/g,  '&amp;')
        .replace(/</g,  '&lt;')
        .replace(/>/g,  '&gt;')
        .replace(/"/g,  '&quot;')
        .replace(/'/g,  '&#39;')
    }

    function escAttr(str) {
      if (typeof str !== 'string') return ''
      return str
        .replace(/&/g,  '&amp;')
        .replace(/"/g,  '&quot;')
        .replace(/'/g,  '&#39;')
        .replace(/</g,  '&lt;')
        .replace(/>/g,  '&gt;')
    }

    function renderWithLinks(text) {
      if (!text) return esc(text)
      // First handle markdown links [text](url)
      let result = text.replace(
        /\\[([^\\]]+)\\]\\(([^)]+)\\)/g,
        (match, linkText, url) => '<a href="' + escAttr(url) + '" target="_blank">' + esc(linkText) + '</a>'
      )
      // Then handle bare URLs not already in an href
      result = result.replace(
        /(?<!href=")(?<!["(])(https?:\\/\\/[^\\s<)"]+|noteplan:\\/\\/[^\\s<)"]+|omnifocus:\\/\\/[^\\s<)"]+|things:\\/\\/[^\\s<)"]+)/g,
        url => '<a href="' + escAttr(url) + '" target="_blank">' + esc(url) + '</a>'
      )
      return result
    }

    // ==========================================================
    // ADD TASK MODAL
    // ==========================================================
    function openAddTaskModal() {
      state.modalNotes = null
      sendToPlugin('handleGetNoteList', { roleName: state.currentRole })

      const overlay = document.createElement('div')
      overlay.className = 'modal-overlay'
      overlay.id = 'add-task-overlay'
      overlay.innerHTML = \`
        <div class="modal" id="add-task-modal">
          <div class="modal-title">Add Task</div>
          <div class="modal-field">
            <label class="modal-label">Task</label>
            <input class="modal-input" id="modal-task-input" type="text" placeholder="What needs to be done?" autocomplete="off" spellcheck="false">
          </div>
          <div class="modal-field">
            <label class="modal-label">Destination note</label>
            <select class="modal-select" id="modal-note-select" disabled>
              <option value="">Loading notes…</option>
            </select>
          </div>
          <div class="modal-field">
            <label class="modal-label">Section</label>
            <select class="modal-select" id="modal-section-select" disabled>
              <option value="top">Top of note</option>
              <option value="bottom">Bottom of note</option>
            </select>
          </div>
          <div class="modal-field" id="modal-position-row" style="display:none">
            <label class="modal-label">Position</label>
            <select class="modal-select" id="modal-position-select">
              <option value="top-of-section">Top of section</option>
              <option value="bottom-of-section">Bottom of section</option>
            </select>
          </div>
          <div class="modal-actions">
            <button class="modal-btn-cancel" id="modal-cancel-btn">Cancel</button>
            <button class="modal-btn-primary" id="modal-add-btn" disabled>Add Task</button>
          </div>
        </div>
      \`
      document.body.appendChild(overlay)

      const taskInput = document.getElementById('modal-task-input')
      taskInput.focus()

      // Close on overlay click (outside modal)
      overlay.addEventListener('click', e => {
        if (e.target === overlay) closeAddTaskModal()
      })

      // Cancel button
      document.getElementById('modal-cancel-btn').addEventListener('click', closeAddTaskModal)

      // Add button
      document.getElementById('modal-add-btn').addEventListener('click', submitAddTask)

      // Enter/Escape on task input
      taskInput.addEventListener('keydown', e => {
        if (e.key === 'Enter') { e.preventDefault(); submitAddTask() }
        if (e.key === 'Escape') { e.preventDefault(); closeAddTaskModal() }
      })

      // Enable Add button when text is entered
      taskInput.addEventListener('input', () => {
        const addBtn = document.getElementById('modal-add-btn')
        if (addBtn) addBtn.disabled = !taskInput.value.trim()
      })
    }

    function closeAddTaskModal() {
      const overlay = document.getElementById('add-task-overlay')
      if (overlay) overlay.remove()
      state.modalNotes = null
    }

    function updateModalNoteList() {
      const noteSelect = document.getElementById('modal-note-select')
      if (!noteSelect || !state.modalNotes) return

      noteSelect.disabled = false
      noteSelect.innerHTML = state.modalNotes.map(n =>
        \`<option value="\${esc(n.filename)}">\${esc(n.title)}</option>\`
      ).join('')

      // Pre-select: if exactly one project is selected in the panel, default to it.
      // Otherwise fall back to the first option (Single Actions, per sort order).
      if (state.selectedProjects && state.selectedProjects.size === 1) {
        const preferred = [...state.selectedProjects][0]
        if (state.modalNotes.some(n => n.filename === preferred)) {
          noteSelect.value = preferred
        }
      }

      // Update section dropdown for the selected note
      updateModalLocations()

      // Listen for note changes
      noteSelect.addEventListener('change', updateModalLocations)
    }

    function updateModalLocations() {
      const noteSelect = document.getElementById('modal-note-select')
      const sectionSelect = document.getElementById('modal-section-select')
      const positionRow = document.getElementById('modal-position-row')
      if (!noteSelect || !sectionSelect || !state.modalNotes) return

      const selectedNote = state.modalNotes.find(n => n.filename === noteSelect.value)
      sectionSelect.disabled = false
      let options = \`<option value="top">Top of note</option><option value="bottom">Bottom of note</option>\`
      if (selectedNote && selectedNote.headings.length) {
        options += selectedNote.headings.map(h => {
          const prefix = '##'.slice(0, Math.min(h.level, 2))
          const indent = h.level > 2 ? '\\u00A0\\u00A0'.repeat(h.level - 2) : ''
          return \`<option value="\${h.lineIndex}" data-type="heading">\${indent}\${esc(prefix + ' ' + h.content)}</option>\`
        }).join('')
      }
      sectionSelect.innerHTML = options

      // Hide Position picker by default; it only appears when a heading is selected.
      if (positionRow) positionRow.style.display = 'none'

      sectionSelect.onchange = () => {
        const selectedOpt = sectionSelect.options[sectionSelect.selectedIndex]
        const isHeading = selectedOpt && selectedOpt.dataset.type === 'heading'
        if (positionRow) positionRow.style.display = isHeading ? 'block' : 'none'
      }
    }

    function submitAddTask() {
      const taskInput = document.getElementById('modal-task-input')
      const noteSelect = document.getElementById('modal-note-select')
      const sectionSelect = document.getElementById('modal-section-select')
      const positionSelect = document.getElementById('modal-position-select')
      if (!taskInput || !noteSelect) return
      const text = taskInput.value.trim()
      if (!text) return
      if (!noteSelect.value) return

      const section = sectionSelect ? sectionSelect.value : 'top'
      const selectedOpt = sectionSelect ? sectionSelect.options[sectionSelect.selectedIndex] : null
      const isHeading = selectedOpt && selectedOpt.dataset.type === 'heading'
      const position = isHeading && positionSelect ? positionSelect.value : null

      sendToPlugin('handleAddTask', {
        noteFilename: noteSelect.value,
        taskText: text,
        section: section,
        position: position
      })

      // Disable button to prevent double-submit
      const addBtn = document.getElementById('modal-add-btn')
      if (addBtn) addBtn.disabled = true
    }

    // ==========================================================
    // START
    // ==========================================================
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', init)
    } else {
      init()
    }
  </script>
</body>
</html>
`

  const dataScript = '<style>:root { --overdue-color: ' + overdueColor + '; }<\/style>' +
    '<script>window.PLUGIN_ID = ' + JSON.stringify(PLUGIN_ID) + ';<\/script>' +
    '<script>window.INITIAL_DATA = ' + JSON.stringify(initialData) + ';<\/script>'
  console.log('Step 7: dataScript built, length=' + dataScript.length)
  const fullHtml = html.replace('</head>', dataScript + '</head>')
  console.log('Step 8: fullHtml ready, length=' + fullHtml.length)
  console.log('Step 9: calling showInMainWindow')
  HTMLView.showInMainWindow(fullHtml, 'Role Focus', { id: PANEL_WINDOW_ID, splitView: false, icon: 'bullseye', iconColor: 'blue-500' })
  console.log('Step 10: showInMainWindow returned')
}

// --------------- COMMAND HANDLERS ---------------

async function openRoleFocusPanel() {
  await buildAndShowPanel({ initialTab: 'role-focus' })
}

async function openInboxTriage() {
  await buildAndShowPanel({ initialTab: 'inbox-triage' })
}

// --------------- PANEL ACTION HANDLERS ---------------
// These are called from panel.html via the jsBridge:
//   window.webkit.messageHandlers.jsBridge.postMessage({ functionName, parameter })
// NotePlan routes the call to the matching exported function, passing `parameter` as the argument.

function formatDoneTimestamp() {
  const now = new Date()
  const year  = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day   = String(now.getDate()).padStart(2, '0')
  let hours   = now.getHours()
  const mins  = String(now.getMinutes()).padStart(2, '0')
  const ampm  = hours >= 12 ? 'PM' : 'AM'
  hours = hours % 12 || 12
  const hStr  = String(hours).padStart(2, '0')
  return `@done(${year}-${month}-${day} ${hStr}:${mins} ${ampm})`
}

async function handleMarkTaskDone(paramsStr) {
  console.log('handleMarkTaskDone: started, paramsStr=' + paramsStr)
  const { noteRef, lineIndex } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  console.log('handleMarkTaskDone: note found = ' + !!note)
  if (!note) return
  const paragraph = note.paragraphs.find(p => p.lineIndex === lineIndex)
  console.log('handleMarkTaskDone: paragraph found = ' + !!paragraph)
  if (!paragraph) return
  const settings = DataStore.settings || {}
  const shouldAppend = settings.appendCompletionDate === undefined
    ? true
    : (settings.appendCompletionDate === true || settings.appendCompletionDate === 'true')
  console.log('handleMarkTaskDone: shouldAppend = ' + shouldAppend + ' raw setting = ' + settings.appendCompletionDate)
  paragraph.type = 'done'
  if (shouldAppend) {
    const stamp = formatDoneTimestamp()
    console.log('handleMarkTaskDone: appending stamp = ' + stamp)
    paragraph.content = paragraph.content.trimEnd() + ' ' + stamp
  }
  note.updateParagraph(paragraph)
  console.log('handleMarkTaskDone: complete')
}

async function handleOpenNote(paramsStr) {
  const { noteRef, lineIndex } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  if (!note) return
  // Opens the note in the editor and scrolls to the target line
  await Editor.openNoteByFilename(note.filename, false, lineIndex, lineIndex)
}

async function handleAddTag(paramsStr) {
  const { noteRef, lineIndex, tag } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  if (!note) return
  const paragraph = note.paragraphs.find(p => p.lineIndex === lineIndex)
  if (!paragraph) return
  const tagText = tag.startsWith('#') ? tag : `#${tag}`
  paragraph.content = `${paragraph.content.trimEnd()} ${tagText}`
  note.updateParagraph(paragraph)
}

async function handleAssignRole(paramsStr) {
  const { noteRef, lineIndex, mentionName } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  if (!note) return
  const paragraph = note.paragraphs.find(p => p.lineIndex === lineIndex)
  if (!paragraph) return
  paragraph.content = `${paragraph.content.trimEnd()} @${mentionName}`
  note.updateParagraph(paragraph)
}

async function handleEditTask(paramsStr) {
  const { noteRef, lineIndex, newContent } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  if (!note) return
  const paragraph = note.paragraphs.find(p => p.lineIndex === lineIndex)
  if (!paragraph) return
  paragraph.content = newContent
  note.updateParagraph(paragraph)
}

async function handleClearTask(paramsStr) {
  console.log('handleClearTask called: ' + paramsStr)
  const { noteRef, lineIndex, newContent } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  if (!note) { console.log('handleClearTask: note not found for ref: ' + JSON.stringify(noteRef)); return }
  const paragraph = note.paragraphs.find(p => p.lineIndex === lineIndex)
  if (!paragraph) { console.log('handleClearTask: paragraph not found at lineIndex ' + lineIndex); return }
  console.log('handleClearTask: updating "' + paragraph.content + '" → "' + newContent + '"')
  paragraph.content = newContent
  note.updateParagraph(paragraph)
}


async function handleFlagTask(paramsStr) {
  const { noteRef, lineIndex } = JSON.parse(paramsStr)
  const note = getNoteByRef(noteRef)
  if (!note) return
  const paragraph = note.paragraphs.find(p => p.lineIndex === lineIndex)
  if (!paragraph) return

  const flagged = paragraph.content.startsWith('! ')
  paragraph.content = flagged
    ? paragraph.content.slice(2)
    : '! ' + paragraph.content

  note.updateParagraph(paragraph)

  await pushToPanel('flagResult', {
    lineIndex,
    noteFilename: noteRef.filename,
    newContent: paragraph.content,
    flagged: !flagged
  })
}

function getDisplayTitle(note, roleFolderPrefix) {
  const relativePath = note.filename.slice(roleFolderPrefix.length)
  const parts = relativePath.split('/')
  if (parts.length === 1) {
    return note.title || parts[0]
  }
  const subfolderName = parts[parts.length - 2]
  const noteTitle = note.title || parts[parts.length - 1]
  return subfolderName + ' / ' + noteTitle
}

async function handleGetNoteList(paramsStr) {
  const { roleName } = JSON.parse(paramsStr)
  const role = (getRolesFromFolders() || []).find(r => r.folderName === roleName)
    || deriveRoleNames(roleName)
  const roleFolderPrefix = getRolesParentFolder() + '/' + role.folderName + '/'

  const notes = (DataStore.projectNotes || [])
    .filter(n => n.filename.startsWith(roleFolderPrefix))
    .map(n => {
      const relativePath = n.filename.slice(roleFolderPrefix.length)
      const parts = relativePath.split('/')
      const isNested = parts.length > 1
      const subfolder = isNested ? parts.slice(0, -1).join('/') : ''
      const baseTitle = n.title || parts[parts.length - 1]
      return {
        filename: n.filename,
        title: getDisplayTitle(n, roleFolderPrefix),
        baseTitle,
        subfolder,
        isNested,
        isSingleActions: (n.title || '').toLowerCase().includes('single actions'),
        headings: n.paragraphs
          .filter(p => p.type === 'title' || p.type === 'heading')
          .map(p => ({ content: p.content, level: p.headingLevel || 1, lineIndex: p.lineIndex }))
      }
    })

  notes.sort((a, b) => {
    if (a.isSingleActions && !b.isSingleActions) return -1
    if (b.isSingleActions && !a.isSingleActions) return 1
    if (a.isNested !== b.isNested) return a.isNested ? 1 : -1
    if (a.isNested && b.isNested) {
      const folderCmp = a.subfolder.localeCompare(b.subfolder)
      if (folderCmp !== 0) return folderCmp
      return a.baseTitle.localeCompare(b.baseTitle)
    }
    return a.baseTitle.localeCompare(b.baseTitle)
  })

  console.log('handleGetNoteList: found ' + notes.length + ' notes for ' + roleName)
  await pushToPanel('noteList', { notes })
}

async function handleAddTask(paramsStr) {
  const { noteFilename, taskText, section, position } = JSON.parse(paramsStr)
  const note = (DataStore.projectNotes || []).find(n => n.filename === noteFilename)
  if (!note) {
    console.log('handleAddTask: note not found: ' + noteFilename)
    await pushToPanel('addTaskResult', { success: false, error: 'Note not found' })
    return
  }

  const taskLine = '* ' + taskText

  if (section === 'top') {
    note.prependParagraph(taskLine, 'text')
  } else if (section === 'bottom') {
    note.appendParagraph(taskLine, 'text')
  } else {
    // section is a lineIndex pointing to a heading paragraph
    const headingPara = note.paragraphs.find(p => p.lineIndex === Number(section))
    if (!headingPara) {
      console.log('handleAddTask: heading not found at lineIndex ' + section + ', appending to bottom')
      note.appendParagraph(taskLine, 'text')
    } else if (position === 'bottom-of-section') {
      const headingLevel = headingPara.headingLevel || 1
      const paras = note.paragraphs
      const headingIdx = paras.findIndex(p => p.lineIndex === headingPara.lineIndex)
      let insertAfterPara = headingPara
      for (let i = headingIdx + 1; i < paras.length; i++) {
        const p = paras[i]
        if (p.type === 'title' ||
           (p.type === 'heading' && (p.headingLevel || 1) <= headingLevel)) {
          break
        }
        insertAfterPara = p
      }
      note.insertParagraphAfterParagraph(taskLine, insertAfterPara, 'text')
    } else {
      // default: top-of-section — insert immediately after the heading line
      note.insertParagraphAfterParagraph(taskLine, headingPara, 'text')
    }
  }

  console.log('handleAddTask: added task to ' + noteFilename + ' section=' + section + ' position=' + position)
  await pushToPanel('addTaskResult', {
    success: true,
    newTask: {
      taskContent: taskText,
      rawContent: taskText,
      lineIndex: -1,
      indents: 0,
      subContent: [],
      note: { filename: noteFilename, type: 'Notes' },
      noteName: note.title || noteFilename
    }
  })
}

async function pushToPanel(type, data) {
  const payload = Object.assign({ type }, data)
  const doubleStringified = JSON.stringify(JSON.stringify(payload))
  const jsCode = '(function() { try { var d = JSON.parse(' + doubleStringified + '); if (window.onPluginMessage) window.onPluginMessage(d); } catch(e) { console.log("pushToPanel error: " + e.message); } })()'
  console.log('pushToPanel: calling runJavaScript for type=' + type)
  await HTMLView.runJavaScript(jsCode, PANEL_WINDOW_ID)
  console.log('pushToPanel: done')
}

async function handleRefreshRole(paramsStr) {
  const { roleName } = JSON.parse(paramsStr)
  setLastSelectedRole(roleName)
  console.log('handleRefreshRole: persisted lastSelectedRole=' + roleName)
  const rolesParentFolder = getRolesParentFolder()
  const noteCache = {
    projectNotes:  (DataStore.projectNotes  || []).filter(n => n.filename.startsWith(rolesParentFolder + '/')),
    calendarNotes: DataStore.calendarNotes || [],
  }
  const tasks = getTasksForRole(roleName, noteCache)
  const projects = getProjectsForRole(roleName, noteCache, tasks)
  console.log('handleRefreshRole: fetched ' + tasks.length + ' tasks, ' + projects.length + ' projects')
  await pushToPanel('roleData', { roleName, tasks, projects })
}

async function handleSaveProjectPanelWidth(paramsStr) {
  const { width } = JSON.parse(paramsStr)
  const w = Number(width)
  if (!(w >= 140 && w <= 400)) return
  setProjectPanelWidth(w)
  console.log('handleSaveProjectPanelWidth: saved width=' + w)
}

async function handleSaveFlagsOnTop(paramsStr) {
  const { value } = JSON.parse(paramsStr)
  setFlagsOnTop(value === true)
  console.log('handleSaveFlagsOnTop: saved value=' + (value === true))
}

// Build the cross-role flagged hit-list.
// Scans every role, keeps only tasks starting with '! ', drops any that are
// scheduled past end-of-today (undated tasks are kept). Dedupes by
// filename+lineIndex (first role-match wins) and attaches role + project labels.
async function handleRefreshFlagged() {
  const rolesParentFolder = getRolesParentFolder()
  const noteCache = {
    projectNotes:  (DataStore.projectNotes  || []).filter(n => n.filename.startsWith(rolesParentFolder + '/')),
    calendarNotes: DataStore.calendarNotes || [],
  }
  const roles = getRolesFromFolders()

  const endOfToday = new Date()
  endOfToday.setHours(23, 59, 59, 999)

  const projectTitleByFilename = new Map()
  noteCache.projectNotes.forEach(n => projectTitleByFilename.set(n.filename, n.title || n.filename))

  const seen = new Set()
  const tasks = []
  for (const role of roles) {
    const roleFolderPrefix = rolesParentFolder + '/' + role.folderName + '/'
    const roleTasks = getTasksForRole(role.folderName, noteCache)
    for (const t of roleTasks) {
      const raw = t.rawContent || t.taskContent || ''
      if (!raw.startsWith('! ')) continue
      const key = (t.note && t.note.filename) + '::' + t.lineIndex
      if (seen.has(key)) continue
      // Drop tasks scheduled beyond today
      const scheduled = extractScheduledDateStr(raw)
      let scheduledMs = null
      if (scheduled) {
        const [y, m, d] = scheduled.split('-').map(Number)
        scheduledMs = new Date(y, m - 1, d).getTime()
      } else if (t.noteDate) {
        const [y, m, d] = t.noteDate.split('-').map(Number)
        scheduledMs = new Date(y, m - 1, d).getTime()
      }
      if (scheduledMs !== null && scheduledMs > endOfToday.getTime()) continue
      seen.add(key)
      // Project label: prefer the title of the source note; for calendar notes
      // fall back to the date string; otherwise the filename.
      let projectLabel = ''
      if (t.note && t.note.type === 'Calendar') {
        projectLabel = t.noteName || ''
      } else if (t.note && t.note.filename) {
        const fn = t.note.filename
        if (fn.startsWith(roleFolderPrefix)) {
          projectLabel = projectTitleByFilename.get(fn) || fn.slice(roleFolderPrefix.length)
        } else {
          projectLabel = projectTitleByFilename.get(fn) || t.noteName || fn
        }
      }
      tasks.push(Object.assign({}, t, {
        roleDisplayName: role.displayName,
        roleFolderName:  role.folderName,
        projectLabel,
      }))
    }
  }
  console.log('handleRefreshFlagged: collected ' + tasks.length + ' flagged tasks across ' + roles.length + ' roles')
  await pushToPanel('flaggedData', { tasks })
}

function extractScheduledDateStr(content) {
  if (!content) return null
  const match = content.match(/>(\d{4}-\d{2}-\d{2})/)
  return match ? match[1] : null
}

async function handleRefreshInbox(paramsStr) {
  const { lookback } = JSON.parse(paramsStr)
  const lb = Number(lookback)
  const lookbackCutoff = new Date()
  lookbackCutoff.setDate(lookbackCutoff.getDate() - (lb > 0 ? lb : 36500))
  const noteCache = {
    projectNotes:  [],
    calendarNotes: lb > 0
      ? (DataStore.calendarNotes || []).filter(n => n.date && n.date >= lookbackCutoff)
      : (DataStore.calendarNotes || []),
  }
  const tasks = getUnassignedTasks(lb, noteCache)
  console.log('handleRefreshInbox: fetched ' + tasks.length + ' tasks from ' + noteCache.calendarNotes.length + ' calendar notes')
  await pushToPanel('inboxData', { tasks, lookback: lb })
}

// --------------- HTML MESSAGE ROUTER ---------------
// Single registered command that receives all messages from the HTMLView panel
// and routes them to the correct handler function.

async function roleHTMLMessage(messageStr) {
  console.log('roleHTMLMessage called with: ' + JSON.stringify(arguments))
  console.log('roleHTMLMessage received: ' + messageStr)
  const { functionName, params } = JSON.parse(messageStr)
  const handlers = {
    handleRefreshRole,
    handleRefreshInbox,
    handleMarkTaskDone,
    handleOpenNote,
    handleAddTag,
    handleAssignRole,
    handleEditTask,
    handleClearTask,
    handleFlagTask,
    handleGetNoteList,
    handleAddTask,
    handleSaveProjectPanelWidth,
    handleSaveFlagsOnTop,
    handleRefreshFlagged,
  }
  if (handlers[functionName]) {
    return await handlers[functionName](JSON.stringify(params))
  } else {
    console.log('roleHTMLMessage: unknown function: ' + functionName)
  }
}

// --------------- DEBUG ---------------

async function debugTaskStructure() {
  const rolesFolder = getRolesParentFolder()
  const notes = DataStore.projectNotes.filter(n => n.filename.startsWith(rolesFolder + '/'))
  if (!notes.length) { console.log('no role notes found under: ' + rolesFolder); return }
  const note = notes[0]
  console.log('Note: ' + note.filename + ' (' + note.paragraphs.length + ' paragraphs)')
  note.paragraphs.forEach((p, i) => {
    console.log('[' + i + '] type=' + p.type + ' indents=' + p.indents + ' content="' + p.content + '"')
  })
}

// --------------- LIFECYCLE HOOKS ---------------

function onUpdateOrInstall() {
  try {
    const prev = DataStore.preference(PREF_LAST_INSTALLED_VERSION) || null
    if (prev !== PLUGIN_VERSION) {
      console.log('Role Focus: ' + (prev ? 'upgraded from ' + prev : 'installed') + ' → ' + PLUGIN_VERSION)
      // Future migrations: branch on `prev` here before updating the stored version.
      DataStore.setPreference(PREF_LAST_INSTALLED_VERSION, PLUGIN_VERSION)
    }
  } catch (e) {
    console.log('onUpdateOrInstall error: ' + e.message)
  }
}

async function onSettingsUpdated() {
  try {
    console.log('onSettingsUpdated: raw settings = ' + JSON.stringify(DataStore.settings))
    await buildAndShowPanel()
  } catch (e) {
    console.log('onSettingsUpdated error: ' + e.message)
  }
}