# files

id: 119e4909-ed50-4758-83fe-0646c56cb1a6
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/portal/templates/app/project.html
version: v4
content:
  {{define "header-left"}}
      <div class="flex items-center gap-3">
        <a href="/app/projects" class="text-2xl font-bold text-white tracking-tight"><span class="text-[#c9a84c]">Deal</span>space</a>
        <span class="text-white/20 text-lg">/</span>
        <div id="projectSwitcher" class="relative">
          <button id="projectSwitcherBtn" onclick="toggleProjectMenu()" class="flex items-center gap-1.5 text-xl font-semibold text-white transition focus:outline-none">
            <span id="projectName">Loading...</span>
            <span style="font-size:10px;opacity:.5;margin-top:2px">▾</span>
          </button>
          <div id="projectMenu" class="hidden absolute left-0 top-full mt-2 min-w-[220px] rounded-lg border shadow-xl z-50" style="background:var(--ds-sf);border-color:var(--ds-bd)">
          </div>
        </div>
      </div>
  {{end}}

  {{define "content"}}
      <div class="px-8 pt-4 pb-8" style="max-width:calc(100vw - 14rem)">
        <p id="projectDesc" class="text-[#b0bec5] text-sm mb-2"></p>

        <!-- Tabs + actions on one line -->
        <div class="flex items-end gap-6 border-b border-white/[0.08] mb-6">
          <button class="tab active pb-3 text-base font-medium transition" onclick="switchTab('requests', this)">Requests</button>
          <button class="tab pb-3 text-base font-medium text-[#b0bec5] transition" onclick="switchTab('orgs', this)">Parties</button>
          <div class="ml-auto flex items-center gap-2 pb-2">
            <span id="projectStatus" class="px-2 py-0.5 rounded text-xs font-medium"></span>
            <button onclick="openCreateListModal()" class="px-3.5 py-1.5 bg-white/[0.07] hover:bg-white/[0.12] text-white rounded text-sm font-medium transition">+ New List</button>
            <button onclick="openTemplateModal()" class="px-3.5 py-1.5 bg-white/[0.07] hover:bg-white/[0.12] text-white rounded text-sm font-medium transition">Use Template</button>
            <button onclick="openImportModal()" class="px-3.5 py-1.5 bg-white/[0.07] hover:bg-white/[0.12] text-white rounded text-sm font-medium transition">Import List</button>
            <button id="detailToggle" onclick="toggleDetailMode()" class="px-3.5 py-1.5 bg-white/[0.07] hover:bg-white/[0.12] text-[#cbd5e1] hover:text-white rounded text-sm font-medium transition">Summary View</button>
          </div>
        </div>

        <!-- Requests Tab -->
        <div id="tab-requests">
          <div id="requestEmpty" class="hidden text-center py-16">
            <h3 class="text-lg font-semibold text-white mb-1">No requests yet</h3>
            <p class="text-[#b0bec5] text-sm mb-4">Import a diligence checklist to get started.</p>
            <button onclick="openImportModal()" class="px-4 py-2 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Import Checklist</button>
          </div>
          <div id="treeWrap" class="overflow-x-auto">
            <table id="reqTree">
              <thead>
                <tr>
                  <th style="width:28px" title="Drag to reorder"></th>
                  <th style="width:60px">#</th>
                  <th style="min-width:280px">Request Item</th>
                  <th style="width:80px">Priority</th>
                  <th style="width:90px">Status</th>
                  <th style="width:120px">Assignee</th>
                  <th style="width:90px">Due Date</th>
                  <th style="width:90px">Label</th>
                  <th style="width:50px">Files</th>
                  <th style="width:160px">Buyer Comment</th>
                  <th style="width:160px">Seller Comment</th>
                  <th style="width:90px">Created</th>
                  <th style="width:40px"></th>
                </tr>
              </thead>
              <tbody id="treeBody">
                <tr><td colspan="13" class="text-[#b0bec5] text-sm py-4">Loading requests...</td></tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- Orgs Tab -->
        <div id="tab-orgs" class="hidden">
          <div class="flex justify-between items-center mb-6">
            <p class="text-[#b0bec5] text-sm">Parties participating in this deal and their permissions.</p>
            <button onclick="openAddOrgModal()" class="px-3 py-1.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">+ Add Org</button>
          </div>
          <div id="orgList" class="space-y-3"><div class="text-[#b0bec5] text-sm">Loading...</div></div>
        </div>
      </div>

    <!-- Edit Org Modal -->
    <div id="editOrgModal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
        <div class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-white/[0.08]">
          <h2 class="text-lg font-semibold text-white">Edit Organization</h2>
          <button onclick="closeEditOrgModal()" class="text-[#b0bec5] hover:text-white text-2xl leading-none">&times;</button>
        </div>
        <div class="p-6">
          <input type="hidden" id="editOrgDealOrgId">
          <input type="hidden" id="editOrgVersion">
          <div class="grid grid-cols-2 gap-4">
            <div class="col-span-2 flex items-start gap-4">
              <div id="editOrgLogoWrap" class="hidden shrink-0 w-16 h-16 rounded-lg border border-white/[0.08] overflow-hidden bg-white flex items-center justify-center">
                <img id="editOrgLogoImg" src="" class="max-w-full max-h-full object-contain">
              </div>
              <div class="flex-1">
                <label class="block text-xs text-[#b0bec5] mb-1">Name <span class="text-red-400">*</span></label>
                <input type="text" id="editOrgName" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
              </div>
            </div>
            <div class="col-span-2">
              <label class="block text-xs text-[#b0bec5] mb-1">Description</label>
              <textarea id="editOrgDesc" rows="3" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] resize-none"></textarea>
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Role in deal</label>
              <select id="editOrgRole" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
                <option value="seller">Seller</option>
                <option value="buyer">Buyer</option>
                <option value="ib">Investment Bank</option>
                <option value="advisor">Advisor</option>
              </select>
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Industry</label>
              <input type="text" id="editOrgIndustry" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Website</label>
              <input type="text" id="editOrgWebsite" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Phone</label>
              <input type="text" id="editOrgPhone" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">LinkedIn</label>
              <input type="text" id="editOrgLinkedIn" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Founded</label>
              <input type="text" id="editOrgFounded" placeholder="e.g. 2010" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div class="col-span-2">
              <label class="block text-xs text-[#b0bec5] mb-1">Address</label>
              <input type="text" id="editOrgAddress" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">City</label>
              <input type="text" id="editOrgCity" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">State</label>
              <input type="text" id="editOrgState" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div class="col-span-2">
              <label class="block text-xs text-[#b0bec5] mb-1">Logo URL</label>
              <input type="text" id="editOrgLogo" placeholder="https://..." class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]"
                oninput="previewEditOrgLogo()">
            </div>
          </div>
          <div id="editOrgError" class="hidden mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"></div>
        </div>
        <div class="flex gap-3 px-6 pb-6">
          <button onclick="closeEditOrgModal()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
          <button id="editOrgSaveBtn" onclick="saveEditOrg()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Save Changes</button>
        </div>
      </div>
    </div>

    <!-- Deal Member Picker Modal -->
    <div id="dealMemberPickerModal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl w-full max-w-lg flex flex-col" style="max-height:85vh">
        <div class="flex items-center justify-between px-5 pt-5 pb-3 shrink-0">
          <div>
            <h2 class="text-base font-semibold text-white">Add people to deal</h2>
            <p id="dmpOrgName" class="text-xs mt-0.5" style="color:var(--ds-tx3)"></p>
          </div>
          <button onclick="closeDealMemberPicker()" class="text-[#94a3b8] hover:text-white text-2xl leading-none">&times;</button>
        </div>
        <!-- Search -->
        <div class="px-5 pb-3 shrink-0">
          <input type="text" id="dmpSearch" placeholder="Search by name or email..." oninput="filterDmpList()"
            class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#64748b]">
        </div>
        <!-- Existing members from global org -->
        <div id="dmpList" class="overflow-y-auto flex-1 px-5 space-y-1.5"></div>
        <!-- Add new person inline -->
        <div class="px-5 py-4 border-t shrink-0" style="border-color:var(--ds-bd)">
          <p class="text-xs mb-2 font-medium" style="color:var(--ds-tx3)">Not listed? Add a new person:</p>
          <div class="grid gap-2" style="grid-template-columns:1fr 1fr 1fr auto">
            <input type="text" id="dmpNewName" placeholder="Name" class="px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#64748b]">
            <input type="email" id="dmpNewEmail" placeholder="Email" class="px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#64748b]">
            <input type="text" id="dmpNewTitle" placeholder="Title" onkeydown="if(event.key==='Enter'){event.preventDefault();addNewDealMember();}" class="px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#64748b]">
            <button onclick="addNewDealMember()" class="px-3 py-2 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-bold rounded-lg text-sm transition">+</button>
          </div>
          <div id="dmpAddError" class="hidden mt-1.5 text-xs text-red-400"></div>
        </div>
        <!-- Footer -->
        <div class="flex gap-3 px-5 pb-5 shrink-0">
          <button onclick="closeDealMemberPicker()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
          <button id="dmpAddBtn" onclick="confirmDealMemberAdd()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Add selected</button>
        </div>
      </div>
    </div>

    <!-- Template Picker Modal -->
    <div id="templateModal" style="display:none" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] rounded-xl w-full max-w-lg border border-white/[0.08]">
        <div class="flex items-center justify-between px-6 pt-5 pb-4 border-b border-white/[0.08]">
          <h2 class="text-lg font-semibold text-white">Use a Template</h2>
          <button onclick="closeTemplateModal()" class="text-[#94a3b8] hover:text-white text-2xl leading-none">&times;</button>
        </div>
        <div id="templateList" class="px-4 py-3 space-y-2 max-h-80 overflow-y-auto">
          <div class="text-sm text-[#94a3b8]">Loading templates...</div>
        </div>
        <div class="px-6 py-4 border-t border-white/[0.08]">
          <label class="block text-xs text-[#94a3b8] mb-1.5">List name (optional — uses template name by default)</label>
          <input type="text" id="templateListName" placeholder="Leave blank to use template name"
            class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] mb-4"
            onkeydown="if(event.key==='Enter')submitTemplateImport()">
          <div id="templateImportError" class="hidden mb-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"></div>
          <div class="flex gap-3">
            <button onclick="closeTemplateModal()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
            <button id="templateImportBtn" onclick="submitTemplateImport()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Add to Deal</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Create List Modal -->
    <div id="createListModal" style="display:none" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] rounded-xl p-6 w-full max-w-md border border-white/[0.08]">
        <h2 class="text-lg font-semibold text-white mb-4">New Request List</h2>
        <div id="createListError" class="hidden mb-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"></div>
        <div class="mb-4">
          <label class="block text-sm font-medium text-[#b0bec5] mb-1.5">List name</label>
          <input type="text" id="createListName" placeholder="e.g. Legal Due Diligence, Financial Review"
            class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white placeholder-[#8899a6] focus:outline-none focus:border-[#c9a84c] text-sm"
            onkeydown="if(event.key==='Enter')submitCreateList()">
        </div>
        <div class="flex gap-3">
          <button onclick="closeCreateListModal()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
          <button id="createListBtn" onclick="submitCreateList()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Create</button>
        </div>
      </div>
    </div>

    <!-- Import Modal -->
    <div id="importModal" style="display:none" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-8 w-full max-w-md">
        <h2 class="text-xl font-semibold text-white mb-6">Import Diligence Checklist</h2>
        <div id="importError" class="hidden mb-4 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"></div>
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-[#b0bec5] mb-1.5">Request List Name</label>
            <input type="text" id="importListName" placeholder="e.g. Blackstone DDQ, General Checklist"
              class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c]">
          </div>
          <div>
            <label class="block text-sm font-medium text-[#b0bec5] mb-1.5">File (CSV or XLSX)</label>
            <input type="file" id="importFile" accept=".csv,.xlsx,.xls" required
              class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] focus:ring-1 focus:ring-[#c9a84c]">
          </div>
          <div>
            <label class="block text-sm font-medium text-[#b0bec5] mb-1.5">Import Mode</label>
            <select id="importMode" class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white focus:outline-none focus:border-[#c9a84c]">
              <option value="add">Add new request list</option>
              <option value="replace">Replace all request lists</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-[#b0bec5] mb-1.5">Visible to</label>
            <select id="importVisibility" class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white focus:outline-none focus:border-[#c9a84c]">
              <option value="">Everyone (General List)</option>
            </select>
          </div>
        </div>
        <div class="flex gap-3 mt-6">
          <button onclick="closeImportModal()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
          <button id="importBtn" onclick="submitImport()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Import List</button>
        </div>
      </div>
    </div>

    <!-- Attach Answer Modal -->
    <div id="attachModal" style="display:none" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl p-8 w-full max-w-lg">
        <h2 class="text-xl font-semibold text-white mb-2">Attach Answer Document</h2>
        <p id="attachReqTitle" class="text-[#b0bec5] text-sm mb-2"></p>
        <div class="mb-4">
          <input type="text" id="attachSearch" placeholder="Search existing documents..."
            class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]"
            oninput="searchAnswers(this.value)">
        </div>
        <div id="attachList" class="max-h-64 overflow-y-auto space-y-1 mb-4"></div>
        <div class="border-t border-white/[0.08] pt-4">
          <label class="block text-sm font-medium text-[#b0bec5] mb-1.5">Or upload new document</label>
          <input type="file" id="attachFile" class="w-full px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm">
        </div>
        <div class="flex gap-3 mt-4">
          <button onclick="closeAttachModal()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
          <button onclick="uploadAndLink()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Upload &amp; Link</button>
        </div>
      </div>
    </div>

    <!-- Add Party Modal (3-step: email → org details → colleagues) -->
    <div id="addOrgModal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">

        <!-- Step 1: Email lookup -->
        <div id="addOrgStep1" class="p-6">
          <div class="flex items-center justify-between mb-1">
            <h2 id="addOrgTitle" class="text-lg font-semibold text-white">Add Party</h2>
            <button onclick="closeAddOrgModal()" class="text-[#b0bec5] hover:text-white transition text-2xl leading-none">&times;</button>
          </div>
          <p id="addOrgHint" class="text-[#b0bec5] text-sm mb-5">Enter an email address or domain name — we'll look up the organization automatically.</p>
          <!-- Project name — only shown in wizard mode -->
          <div id="wizProjectNameWrap" class="hidden mb-4">
            <label class="block text-xs text-[#b0bec5] mb-1">Deal name <span class="text-red-400">*</span></label>
            <input type="text" id="wizProjectName" placeholder="e.g. Project Falcon"
              class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]"
              onkeydown="if(event.key==='Enter')scrapeOrg()">
          </div>
          <div class="flex gap-3">
            <input type="text" id="addOrgEmail" placeholder="e.g. john.smith@example.com or example.com" autocomplete="off"
              class="flex-1 px-4 py-2.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#8899a6]"
              onkeydown="if(event.key==='Enter')scrapeOrg()">
            <button onclick="scrapeOrg()" id="scrapeBtn" class="px-5 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition whitespace-nowrap">Look up</button>
          </div>
          <div id="scrapeError" class="hidden mt-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm flex items-center justify-between gap-3">
            <span id="scrapeErrorMsg"></span>
            <button onclick="skipScrape()" class="shrink-0 px-3 py-1 bg-white/[0.08] hover:bg-white/[0.12] text-white rounded text-xs font-medium transition">Continue manually</button>
          </div>
          <div id="scrapeLoading" class="hidden mt-4 flex items-center gap-3 text-[#b0bec5] text-sm">
            <svg class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
            Scanning website...
          </div>
        </div>

        <!-- Step 2: Org details (prefilled from scrape) -->
        <div id="addOrgStep2" class="hidden p-6">
          <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-white">Organization Details</h2>
            <button onclick="closeAddOrgModal()" class="text-[#b0bec5] hover:text-white transition text-2xl leading-none">&times;</button>
          </div>
          <div class="grid grid-cols-2 gap-4 mb-5">
            <div class="col-span-2 flex items-start gap-4">
              <div id="orgLogoWrap" class="hidden shrink-0 w-16 h-16 rounded-lg border border-white/[0.08] overflow-hidden bg-white flex items-center justify-center">
                <img id="orgLogoImg" src="" class="max-w-full max-h-full object-contain">
              </div>
              <div class="flex-1">
                <label class="block text-xs text-[#b0bec5] mb-1">Name <span class="text-red-400">*</span></label>
                <input type="text" id="orgName" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
              </div>
            </div>
            <div class="col-span-2">
              <label class="block text-xs text-[#b0bec5] mb-1">Description</label>
              <textarea id="orgDesc" rows="4" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] resize-none"></textarea>
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Role in deal <span class="text-red-400">*</span></label>
              <select id="orgRole" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
                <option value="">Select...</option>
                <option value="seller">Seller</option>
                <option value="buyer">Buyer</option>
                <option value="ib">Investment Bank</option>
                <option value="advisor">Advisor</option>
              </select>
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Industry</label>
              <input type="text" id="orgIndustry" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Website</label>
              <input type="text" id="orgWebsite" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Phone</label>
              <input type="text" id="orgPhone" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div class="col-span-2">
              <label class="block text-xs text-[#b0bec5] mb-1">Address</label>
              <input type="text" id="orgAddress" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">City</label>
              <input type="text" id="orgCity" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">State</label>
              <input type="text" id="orgState" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">Founded</label>
              <input type="text" id="orgFounded" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
            <div>
              <label class="block text-xs text-[#b0bec5] mb-1">LinkedIn</label>
              <input type="text" id="orgLinkedIn" class="w-full px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c]">
            </div>
          </div>
          <div class="flex justify-between">
            <button onclick="showAddOrgStep(1)" class="px-4 py-2 text-[#b0bec5] hover:text-white text-sm transition">Back</button>
            <div id="step2Error" class="hidden mb-3 p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm">Please fill in all required fields.</div>
            <button onclick="advanceFromStep2()" class="px-5 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Next: Select People</button>
          </div>
        </div>

        <!-- Step 3: Colleagues -->
        <div id="addOrgStep3" class="hidden p-6">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-lg font-semibold text-white">Select Colleagues</h2>
            <button onclick="closeAddOrgModal()" class="text-[#b0bec5] hover:text-white transition text-2xl leading-none">&times;</button>
          </div>
          <p class="text-[#b0bec5] text-sm mb-4">Choose who to add to this deal.</p>
          <div class="flex items-center gap-3 mb-4">
            <label class="flex items-center gap-2 cursor-pointer text-sm text-[#b0bec5]">
              <input type="checkbox" id="selectAllPeople" onchange="toggleAllPeople(this.checked)" class="rounded accent-[#c9a84c]">
              Select all
            </label>
            <span id="selectedCount" class="text-xs text-[#8899a6]">0 selected</span>
          </div>
          <div id="peopleList" class="space-y-2 mb-4 max-h-[40vh] overflow-y-auto"></div>
          <div id="noPeople" class="hidden text-[#b0bec5] text-sm py-4 text-center">No team members found on the website.</div>
          <!-- Manual add row -->
          <div class="border-t border-white/[0.08] pt-3 mt-3">
            <p class="text-xs text-[#b0bec5] mb-2">Add manually</p>
            <div class="grid grid-cols-[1fr_1fr_1fr_auto] gap-2">
              <input type="text" id="manualName" placeholder="Name"
                class="px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#8899a6]">
              <input type="email" id="manualEmail" placeholder="Email"
                class="px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#8899a6]">
              <input type="text" id="manualTitle" placeholder="Title"
                onkeydown="if(event.key==='Enter'){event.preventDefault();addManualPerson();}"
                class="px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-sm focus:outline-none focus:border-[#c9a84c] placeholder-[#8899a6]">
              <button onclick="addManualPerson()" class="px-3 py-2 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-bold rounded-lg text-sm transition">+</button>
            </div>
          </div>
          <div class="flex justify-between">
            <button onclick="showAddOrgStep(2)" class="px-4 py-2 text-[#b0bec5] hover:text-white text-sm transition">Back</button>
            <div class="flex flex-col items-end gap-2">
              <div id="step3Error" class="hidden p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm text-right"></div>
              <button onclick="proceedFromStep3()" id="addOrgSubmitBtn" class="px-5 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Add to Deal</button>
            </div>
          </div>
        </div>

        <!-- Step 4: Request List Templates (wizard mode only) -->
        <div id="addOrgStep4" class="hidden p-6">
          <div class="flex items-center justify-between mb-1">
            <h2 class="text-lg font-semibold text-white">Request Lists</h2>
            <button onclick="closeAddOrgModal()" class="text-[#b0bec5] hover:text-white transition text-2xl leading-none">&times;</button>
          </div>
          <p class="text-[#b0bec5] text-sm mb-4">Choose which request list templates to include in this project.</p>

          <div class="space-y-3 mb-6" id="wizTemplatePicker">
            <label class="flex items-start gap-3 p-4 rounded-xl cursor-pointer transition" style="background:var(--ds-hv);border:1px solid var(--ds-bd)">
              <input type="checkbox" class="tmpl-cb mt-0.5 accent-[#c9a84c]" value="core-8" checked onchange="tmplChanged(this)">
              <div>
                <div class="text-sm font-semibold" style="color:var(--ds-tx)">Core Due Diligence</div>
                <div class="text-xs mt-0.5" style="color:var(--ds-tx2)">8 essential items — financials, legal, commercial, HR, tax. The minimum every deal needs.</div>
              </div>
            </label>
            <label class="flex items-start gap-3 p-4 rounded-xl cursor-pointer transition" style="background:var(--ds-hv);border:1px solid var(--ds-bd)">
              <input type="checkbox" class="tmpl-cb mt-0.5 accent-[#c9a84c]" value="comprehensive-100" onchange="tmplChanged(this)">
              <div>
                <div class="text-sm font-semibold" style="color:var(--ds-tx)">Comprehensive Due Diligence</div>
                <div class="text-xs mt-0.5" style="color:var(--ds-tx2)">104 items across 18 sections — financial, legal, tax, commercial, HR, IP, IT, environmental, insurance. Full-scope M&A checklist.</div>
              </div>
            </label>
            <label class="flex items-start gap-3 p-4 rounded-xl cursor-pointer transition" style="background:var(--ds-hv);border:1px solid var(--ds-bd)">
              <input type="checkbox" class="tmpl-cb mt-0.5 accent-[#c9a84c]" value="none" onchange="tmplChanged(this)">
              <div>
                <div class="text-sm font-semibold" style="color:var(--ds-tx)">Start empty</div>
                <div class="text-xs mt-0.5" style="color:var(--ds-tx2)">No request lists — import or create your own later.</div>
              </div>
            </label>
          </div>

          <div class="flex justify-between">
            <button onclick="showAddOrgStep(3)" class="px-4 py-2 text-[#b0bec5] hover:text-white text-sm transition">Back</button>
  <div class="w-full mb-2"><div id="wizError" class="hidden p-3 bg-red-500/10 border border-red-500/20 rounded-lg text-red-400 text-sm"></div></div>
            <button onclick="createNewProject()" id="wizCreateBtn" class="px-6 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Create Project</button>
          </div>
        </div>

      </div>
    </div>

    <!-- Email Preview Modal -->
    <div id="emailPreviewModal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
      <div class="rounded-xl w-full max-w-lg max-h-[80vh] overflow-y-auto" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div class="px-6 py-4 border-b flex items-center justify-between" style="border-color:var(--ds-bd)">
          <h3 class="text-lg font-semibold" style="color:var(--ds-tx)">Invite Emails</h3>
          <button onclick="closeEmailPreview()" class="text-2xl leading-none" style="color:var(--ds-tx2)">&times;</button>
        </div>
        <div class="px-6 py-4">
          <div id="emailPreviewList" class="space-y-2"></div>
        </div>
        <div class="px-6 py-4 border-t" style="border-color:var(--ds-bd)">
          <button onclick="closeEmailPreview()" class="w-full py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">OK</button>
        </div>
      </div>
    </div>

    <!-- Person Slide-out Panel -->
    <div id="personOverlay" class="hidden fixed inset-0 bg-black/40 z-50" onclick="closePersonPanel()"></div>
    <div id="personPanel" class="fixed top-0 right-0 h-full w-full max-w-md z-50 transform translate-x-full transition-transform duration-200 ease-out"
      style="background:var(--ds-sf, #0d1f3c); border-left: 1px solid var(--ds-bd, rgba(255,255,255,.08));">
      <div class="h-full flex flex-col">
        <!-- Header -->
        <div class="flex items-center justify-between px-6 py-4 border-b" style="border-color:var(--ds-bd)">
          <h3 id="personPanelTitle" class="text-lg font-semibold" style="color:var(--ds-tx)">Edit Person</h3>
          <button onclick="closePersonPanel()" class="text-2xl leading-none" style="color:var(--ds-tx2)">&times;</button>
        </div>
        <!-- Body -->
        <div class="flex-1 overflow-y-auto min-h-0 px-6 py-5 space-y-4">
          <input type="hidden" id="ppDealOrgId">
          <input type="hidden" id="ppMemberIdx">
          <!-- Photo + Name -->
          <div class="flex items-center gap-4">
            <div id="ppPhotoWrap" class="w-20 h-20 rounded-full overflow-hidden shrink-0 bg-[#c9a84c]/20 flex items-center justify-center cursor-pointer relative group"
              onclick="document.getElementById('ppPhotoUrlRow').classList.toggle('hidden')" title="Click to change photo">
              <img id="ppPhotoImg" src="" class="w-full h-full object-cover hidden">
              <span id="ppPhotoLetter" class="text-[#c9a84c] text-2xl font-semibold"></span>
              <div class="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition flex items-center justify-center rounded-full">
                <span class="text-white text-xs">Edit</span>
              </div>
            </div>
            <div class="flex-1">
              <label class="block text-xs mb-1" style="color:var(--ds-tx2)">Name</label>
              <input type="text" id="ppName" class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none"
                style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)"
                oninput="previewPersonPhoto()">
            </div>
          </div>
          <div id="ppPhotoUrlRow" class="hidden">
            <label class="block text-xs mb-1" style="color:var(--ds-tx2)">Photo URL</label>
            <input type="text" id="ppPhoto" placeholder="https://..."
              class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none"
              style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)"
              oninput="previewPersonPhoto()">
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:var(--ds-tx2)">Email</label>
            <input type="email" id="ppEmail" class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none"
              style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)">
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:var(--ds-tx2)">Title</label>
            <input type="text" id="ppTitle" class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none"
              style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)">
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:var(--ds-tx2)">Phone</label>
            <input type="text" id="ppPhone" class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none"
              style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)">
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:var(--ds-tx2)">LinkedIn</label>
            <input type="text" id="ppLinkedIn" placeholder=""
              class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none"
              style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)">
          </div>
          <div>
            <label class="block text-xs mb-1" style="color:var(--ds-tx2)">Bio</label>
            <textarea id="ppBio" rows="5" class="w-full px-3 py-2 rounded-lg text-sm focus:outline-none resize-none"
              style="background:var(--ds-inp);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea>
          </div>
        </div>
        <!-- Footer -->
        <div class="px-6 py-4 pb-16 border-t flex items-center gap-3 shrink-0" style="border-color:var(--ds-bd)">
          <button onclick="removePersonFromDeal()" id="ppRemoveBtn"
            class="px-3 py-2 rounded-lg text-sm font-medium transition"
            style="background:rgba(239,68,68,.1);color:#f87171;border:1px solid rgba(239,68,68,.2)">Remove</button>
          <div class="flex-1"></div>
          <button onclick="closePersonPanel()" class="px-4 py-2 rounded-lg text-sm font-medium transition"
            style="background:var(--ds-hv);color:var(--ds-tx)">Cancel</button>
          <button onclick="savePersonPanel()" class="px-4 py-2 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Save</button>
        </div>
      </div>
    </div>

    <!-- Permissions Modal -->
    <div id="permModal" class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4">
      <div class="bg-[#0d1f3c] border border-white/[0.08] rounded-xl w-full max-w-md">
        <div class="p-6 border-b border-white/[0.08] flex items-center justify-between">
          <h2 class="text-lg font-semibold text-white" id="permModalTitle">Permissions</h2>
          <button onclick="closePermModal()" class="text-[#b0bec5] hover:text-white transition text-2xl leading-none">&times;</button>
        </div>
        <div class="p-6 space-y-4">
          <input type="hidden" id="permModalDealOrgId">
          <input type="hidden" id="permModalVersion">
          <input type="hidden" id="permModalOrgId">
          <input type="hidden" id="permModalRole">
          <div class="flex items-center justify-between">
            <span class="text-sm text-[#b0bec5]">Download documents</span>
            <select id="pmDownload" class="px-3 py-1.5 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white text-xs focus:outline-none focus:border-[#c9a84c]">
              <option value="watermark">Watermarked only</option>
              <option value="full">Full (no watermark)</option>
              <option value="none">No access</option>
            </select>
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-[#b0bec5]">Upload documents</span>
            <input type="checkbox" id="pmUpload" class="w-4 h-4 accent-[#c9a84c]">
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-[#b0bec5]">Add request lists</span>
            <input type="checkbox" id="pmAddLists" class="w-4 h-4 accent-[#c9a84c]">
          </div>
          <div class="flex items-center justify-between">
            <span class="text-sm text-[#b0bec5]">Edit request lists</span>
            <input type="checkbox" id="pmEditLists" class="w-4 h-4 accent-[#c9a84c]">
          </div>
          <div>
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm text-[#b0bec5]">Visible request lists</span>
              <label class="flex items-center gap-1.5 text-xs text-[#b0bec5] cursor-pointer">
                <input type="checkbox" id="pmAllLists" class="w-3.5 h-3.5 accent-[#c9a84c]" onchange="toggleAllLists(this.checked)">
                All lists
              </label>
            </div>
            <div id="pmListChecks" class="space-y-1.5 max-h-40 overflow-y-auto pr-1"></div>
          </div>
        </div>
        <div class="p-6 border-t border-white/[0.08] flex gap-3">
          <button onclick="closePermModal()" class="flex-1 py-2.5 bg-white/[0.05] hover:bg-white/[0.08] text-white rounded-lg text-sm font-medium transition">Cancel</button>
          <button onclick="savePermissions()" class="flex-1 py-2.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-sm transition">Save</button>
        </div>
      </div>
    </div>
  {{end}}

  {{define "scripts"}}
    <script>
      const projectID = location.pathname.split('/').pop();
      function fmtDate(ms) { if (!ms) return ''; const d = new Date(ms); return d.toLocaleDateString('en-US', {month:'short',day:'numeric'}); }

      // Badge helpers
      const priStyles = { critical:'background:rgba(239,68,68,.15);color:#f87171', high:'background:rgba(251,146,60,.15);color:#fb923c', medium:'background:rgba(250,204,21,.15);color:#facc15', low:'background:rgba(148,163,184,.15);color:#b0bec5' };
      const statStyles = { 
        open:'background:rgba(107,114,128,.15);color:#9CA3AF', 
        assigned:'background:rgba(59,130,246,.15);color:#3b82f6', 
        answered:'background:rgba(168,85,247,.15);color:#a855f7', 
        review:'background:rgba(201,168,76,.15);color:#C9A84C',
        published:'background:rgba(34,197,94,.15);color:#22c55e'
      };
      const statLabels = { open:'Open', assigned:'Assigned', answered:'Answered', review:'Review', published:'Published' };

      function priorityBadge(p) {
        return `<span class="badge" style="${priStyles[p]||priStyles.medium}">${escHtml(p||'medium')}</span>`;
      }
      function statusBadge(s) {
        return `<span class="badge" style="${statStyles[s]||statStyles.open}">${statLabels[s]||escHtml(s||'open')}</span>`;
      }

      function labelPill(label) {
        if (!label) return '';
        const colors = [
          {bg:'rgba(96,165,250,.15)',fg:'#60a5fa'},{bg:'rgba(244,114,182,.15)',fg:'#f472b6'},
          {bg:'rgba(167,139,250,.15)',fg:'#a78bfa'},{bg:'rgba(251,146,60,.15)',fg:'#fb923c'},
          {bg:'rgba(74,222,128,.15)',fg:'#4ade80'},{bg:'rgba(250,204,21,.15)',fg:'#facc15'}
        ];
        let hash = 0;
        for (let i = 0; i < label.length; i++) hash = ((hash << 5) - hash) + label.charCodeAt(i);
        const c = colors[Math.abs(hash) % colors.length];
        return `<span style="display:inline-block;padding:1px 8px;border-radius:9999px;font-size:11px;background:${c.bg};color:${c.fg}">${escHtml(label)}</span>`;
      }

      function fmtDueDate(v) {
        if (!v) return '\u2014';
        if (typeof v === 'number') return fmtDate(v);
        return escHtml(String(v));
      }

      const statusColors = { active: 'bg-green-500/20 text-green-300', draft: 'bg-gray-500/20 text-gray-300', closed: 'bg-red-500/20 text-red-300' };
      const roleColors = { seller: 'bg-blue-500/20 text-blue-300', buyer: 'bg-green-500/20 text-green-300', ib: 'bg-[#c9a84c]/20 text-[#c9a84c]', advisor: 'bg-purple-500/20 text-purple-300' };

      // ---- State ----
      let treeData = [];
      let collapsed = new Set();
      let numberMap = {};
      let openMenuId = null;
      let attachRequestId = null;
      let detailMode = false;

      // ---- Detail toggle ----
      function toggleDetailMode() {
        detailMode = !detailMode;
        document.getElementById('detailToggle').textContent = detailMode ? 'Detailed View' : 'Summary View';
        renderTree();
      }

      // ---- Project loading ----
      async function loadProject() {
        try {
          const res = await fetchAPI('/api/projects/' + projectID);
          if (!res.ok) { document.getElementById('projectTitle').textContent = 'Not found'; return; }
          const raw = await res.json();
          const p = raw.project || raw;
          const d = parseData(p.data_text);
          const name = d.name || p.summary_text || p.summary || 'Untitled';
          document.title = name + ' — Dealspace';
          document.getElementById('projectName').textContent = name;
          fetchAPI('/api/projects').then(r=>r.json()).then(projects=>{
            const menu = document.getElementById('projectMenu');
            menu.innerHTML = (projects||[]).map(p=>{
              const d = p.data_text ? (()=>{try{return JSON.parse(p.data_text)}catch{return{}}})() : {};
              const pname = d.name || p.search_key || p.entry_id;
              const active = p.entry_id === projectID;
              return `<div onclick="switchProject('${p.entry_id}')" class="px-4 py-2.5 cursor-pointer transition text-sm" style="color:${active?'var(--ds-ac)':'var(--ds-tx)'};background:${active?'rgba(255,255,255,.04)':'transparent'}" onmouseover="this.style.background='rgba(255,255,255,.06)'" onmouseout="this.style.background='${active?'rgba(255,255,255,.04)':'transparent'}'">
                ${escHtml(pname)}
              </div>`;
            }).join('');
          }).catch(()=>{});
          // projectTitle removed — name shown in header breadcrumb only
          document.getElementById('projectDesc').textContent = d.description || '';
          const status = d.status || 'active';
          const sc = statusColors[status] || 'bg-gray-500/20 text-gray-300';
          document.getElementById('projectStatus').className = 'px-2.5 py-0.5 rounded-full text-xs font-medium capitalize ' + sc;
          document.getElementById('projectStatus').textContent = status;
        } catch(e) {}
      }

      // ---- Tree loading ----
      async function loadRequestTree() {
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/requests/tree');
          treeData = await res.json();
          if (!treeData || treeData.length === 0) {
            document.getElementById('requestEmpty').classList.remove('hidden');
            document.getElementById('treeWrap').classList.add('hidden');
            return;
          }
          document.getElementById('requestEmpty').classList.add('hidden');
          document.getElementById('treeWrap').classList.remove('hidden');
          buildNumbering();
          renderTree();
        } catch(e) {
          document.getElementById('treeBody').innerHTML = '<tr><td colspan="13" class="text-red-400 text-sm py-4">Failed to load requests.</td></tr>';
        }
      }

      // Build hierarchical numbering (1, 1.1, 1.1.1, etc.)
      function buildNumbering() {
        numberMap = {};
        const childrenOf = {};
        for (const item of treeData) {
          if (!childrenOf[item.parent_id]) childrenOf[item.parent_id] = [];
          childrenOf[item.parent_id].push(item.entry_id);
        }
        const counters = {};
        for (const item of treeData) {
          if (!counters[item.parent_id]) counters[item.parent_id] = 0;
          counters[item.parent_id]++;
          const parentNum = numberMap[item.parent_id];
          if (item.type === 'request_list') {
            numberMap[item.entry_id] = '' + counters[item.parent_id];
          } else {
            numberMap[item.entry_id] = (parentNum ? parentNum + '.' : '') + counters[item.parent_id];
          }
        }
      }

      // Check if an item or any ancestor is collapsed
      function isHidden(item) {
        const parentMap = {};
        for (const t of treeData) parentMap[t.entry_id] = t.parent_id;
        let pid = item.parent_id;
        while (pid && pid !== projectID) {
          if (collapsed.has(pid)) return true;
          pid = parentMap[pid];
        }
        return false;
      }

      // Auto-summarize long request text for Summary View.
      // Short text (≤8 words or ≤60 chars) is returned as-is.
      // Longer text: extract the first complete sentence; if still long, trim to ~80 chars at a word boundary.
      function summarize(text) {
        if (!text) return text;
        const wordCount = text.trim().split(/\s+/).length;
        if (wordCount <= 8 || text.length <= 60) return text;
        // Try to find a sentence boundary
        const m = text.match(/^(.+?[.!?])(?:\s|$)/);
        if (m && m[1].length <= 120) return m[1];
        // No clean sentence — trim to ~80 chars at last word boundary
        if (text.length <= 80) return text;
        const cut = text.lastIndexOf(' ', 80);
        return text.substring(0, cut > 20 ? cut : 80) + '…';
      }

      function renderTree() {
        const tbody = document.getElementById('treeBody');
        let html = '';
        for (const item of treeData) {
          if (isHidden(item)) continue;
          const d = item.data || {};
          const num = numberMap[item.entry_id] || '';
          const indent = Math.max(0, item.depth - 1) * 20;
          const isCollapsible = item.type === 'request_list' || item.type === 'section';
          const isCollapsed = collapsed.has(item.entry_id);
          const chevron = isCollapsible
            ? `<span class="collapse-btn ${isCollapsed?'collapsed':''}" onclick="toggleCollapse('${item.entry_id}')">\u25BC</span>`
            : '';

          if (item.type === 'request_list') {
            const name = d.name || 'Request List';
            const childCount = item.children_count || 0;
            const visOrgId = d.visibility_org_id || '';
            const visBadge = visOrgId
              ? `<span style="display:inline-block;padding:1px 8px;border-radius:9999px;font-size:10px;background:rgba(251,146,60,.15);color:#fb923c;margin-left:8px">Restricted</span>`
              : `<span style="display:inline-block;padding:1px 8px;border-radius:9999px;font-size:10px;background:rgba(74,222,128,.12);color:#4ade80;margin-left:8px">All</span>`;
            html += `<tr class="row-list" data-id="${item.entry_id}" data-type="${item.type}" data-parent="${item.parent_id}" data-depth="${item.depth}">
              <td></td>
              <td colspan="11" style="padding-left:${indent+10}px">
                ${chevron}
                <strong style="color:var(--ds-tx);margin-left:4px;font-size:13px;font-weight:600">${escHtml(name)}</strong>
                ${visBadge}
                <span style="color:var(--ds-tx3);margin-left:8px;font-size:11px">${childCount} items</span>
                <button onclick="editVisibility('${item.entry_id}')" style="margin-left:6px;background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 4px" title="Change visibility">&#9881;</button>
                <button onclick="startInlineAdd('section','${item.entry_id}')" style="margin-left:10px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px">+ Section</button>
                <button onclick="startInlineAdd('request','${item.entry_id}')" style="margin-left:4px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px">+ Request</button>
              </td>
              <td style="position:relative;text-align:right">
                <button onclick="toggleMenu(event,'${item.entry_id}')" style="background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:16px;padding:2px 6px">&hellip;</button>
                <div id="menu-${item.entry_id}" class="actions-menu" style="display:none">
                  <button onclick="startInlineAdd('section','${item.entry_id}')">+ Add Section</button>
                  <button onclick="startInlineAdd('request','${item.entry_id}')">+ Add Request</button>
                  <button onclick="editVisibility('${item.entry_id}')">Change Visibility</button>
                  <button onclick="renameListOrSection('${item.entry_id}','list')" style="border-top:1px solid var(--ds-bd);margin-top:2px;padding-top:6px">Rename</button>
                  <button onclick="deleteEntry('${item.entry_id}')" style="color:#f87171">Delete List</button>
                </div>
              </td>
            </tr>`;
          } else if (item.type === 'section') {
            const name = d.name || d.title || 'Section';
            html += `<tr class="row-section" data-id="${item.entry_id}" data-type="${item.type}" data-parent="${item.parent_id}" data-depth="${item.depth}"
                  draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)">
              <td class="drag-handle" style="color:var(--ds-tx3);font-size:11px;cursor:grab">\u2630</td>
              <td class="row-num" style="padding-left:${indent}px">${escHtml(num)}</td>
              <td colspan="10" style="padding-left:${indent}px">
                ${chevron}
                <span style="color:var(--ds-tx);font-weight:600;font-size:13px;margin-left:4px">${escHtml(name)}</span>
                <span style="color:var(--ds-tx3);margin-left:8px;font-size:11px">${item.children_count||0} requests</span>
                <button onclick="startInlineAdd('request','${item.entry_id}')" style="margin-left:10px;background:none;border:1px solid var(--ds-bd);border-radius:4px;cursor:pointer;color:var(--ds-tx3);font-size:11px;padding:1px 8px">+ Request</button>
              </td>
              <td style="position:relative;text-align:right">
                <button onclick="toggleMenu(event,'${item.entry_id}')" style="background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:16px;padding:2px 6px">&hellip;</button>
                <div id="menu-${item.entry_id}" class="actions-menu" style="display:none">
                  <button onclick="startInlineAdd('request','${item.entry_id}')">+ Add Request</button>
                  <button onclick="renameListOrSection('${item.entry_id}','section')" style="border-top:1px solid var(--ds-bd);margin-top:2px;padding-top:6px">Rename</button>
                  <button onclick="deleteEntry('${item.entry_id}')" style="color:#f87171">Delete Section</button>
                </div>
              </td>
            </tr>`;
          } else {
            // request row
            const title = d.title || d.description || 'Untitled';
            const buyerComment = d.buyer_comment || '';
            const sellerComment = d.seller_comment || '';
            const assignee = d.assignee || d.assigned_to || '';
            const dueDate = d.due_date || d.completed_date || '';
            const label = d.label || '';
            const curPri = d.priority || 'medium';
            const curStat = d.status || 'open';
            const eid = item.entry_id;

            // Title with detail mode
            let titleHtml;
            if (detailMode) {
              titleHtml = `<a href="/app/requests/${eid}" style="color:var(--ds-tx);text-decoration:none" class="hover:underline">${escHtml(title)}</a>`;
              if (d.description) {
                titleHtml += `<div style="color:var(--ds-tx3);font-size:12px;margin-top:2px;line-height:1.4">${escHtml(d.description)}</div>`;
              }
            } else {
              titleHtml = `<a href="/app/requests/${eid}" style="color:var(--ds-tx);text-decoration:none;line-height:1.4" class="hover:underline">${escHtml(summarize(title))}</a>`;
            }

            // Priority select
            const priOpts = ['critical','high','medium','low'].map(o =>
              `<option value="${o}" ${o===curPri?'selected':''}>${o}</option>`
            ).join('');
            const prioritySelect = `<select class="badge" style="${priStyles[curPri]||priStyles.medium};border:none;cursor:pointer;font-size:11px;padding:2px 14px 2px 6px;border-radius:9999px;-webkit-appearance:none;appearance:none;outline:none;font-weight:500" onchange="updateField('${eid}','priority',this.value)">${priOpts}</select>`;

            // Status select
            const statOpts = ['open','assigned','answered','review','published'].map(o =>
              `<option value="${o}" ${o===curStat?'selected':''}>${statLabels[o]}</option>`
            ).join('');
            const statusSelect = `<select class="badge" style="${statStyles[curStat]||statStyles.open};border:none;cursor:pointer;font-size:11px;padding:2px 14px 2px 6px;border-radius:9999px;-webkit-appearance:none;appearance:none;outline:none;font-weight:500" onchange="updateField('${eid}','status',this.value)">${statOpts}</select>`;

            html += `<tr class="row-request" data-id="${eid}" data-type="${item.type}" data-parent="${item.parent_id}" data-depth="${item.depth}"
                  draggable="true" ondragstart="onDragStart(event)" ondragover="onDragOver(event)" ondragleave="onDragLeave(event)" ondrop="onDrop(event)">
              <td class="drag-handle" style="color:var(--ds-tx3);font-size:11px">\u2630</td>
              <td class="row-num" style="padding-left:${indent}px">${escHtml(num)}</td>
              <td class="req-title-cell" style="white-space:normal;max-width:400px;padding-left:${indent}px">
                ${titleHtml}
              </td>
              <td>${prioritySelect}</td>
              <td>${statusSelect}</td>
              <td style="max-width:120px;overflow:hidden;text-overflow:ellipsis;color:var(--ds-tx2);font-size:12px">${assignee ? escHtml(assignee) : '\u2014'}</td>
              <td style="color:var(--ds-tx2);font-size:12px">${dueDate ? fmtDueDate(dueDate) : '\u2014'}</td>
              <td>${labelPill(label)}</td>
              <td style="text-align:center">
                ${item.answer_count > 0
                  ? `<span class="badge" style="background:rgba(74,222,128,.15);color:#4ade80;cursor:pointer" onclick="showAttachModalById('${eid}')">${item.answer_count}</span>`
                  : `<span style="color:var(--ds-tx3);cursor:pointer;font-size:12px" onclick="showAttachModalById('${eid}')">&mdash;</span>`}
              </td>
              <td style="max-width:140px;overflow:hidden;text-overflow:ellipsis;color:var(--ds-tx2);font-size:12px" title="${escHtml(buyerComment)}">${escHtml(buyerComment)}</td>
              <td style="max-width:140px;overflow:hidden;text-overflow:ellipsis;color:var(--ds-tx2);font-size:12px" title="${escHtml(sellerComment)}">${escHtml(sellerComment)}</td>
              <td style="color:var(--ds-tx3);font-size:12px">${fmtDate(item.created_at)}</td>
              <td style="position:relative">
                <button onclick="toggleMenu(event,'${eid}')" style="background:none;border:none;cursor:pointer;color:var(--ds-tx3);font-size:16px;padding:2px 6px">&hellip;</button>
                <div id="menu-${eid}" class="actions-menu" style="display:none">
                  <button onclick="showAttachModalById('${eid}')">Attach Answer</button>
                  <button onclick="editRequest('${eid}', event)">Edit</button>
                  <button onclick="deleteEntry('${eid}')">Delete</button>
                </div>
              </td>
            </tr>`;
          }
        }
        if (!html) html = '<tr><td colspan="13" class="text-[#b0bec5] text-sm py-4">No requests found.</td></tr>';
        tbody.innerHTML = html;
      }

      // ---- Inline add section / request ----
      let inlineAddRow = null;

      function startInlineAdd(type, parentId) {
        // Remove any existing inline row
        const existing = document.getElementById('inlineAddRow');
        if (existing) existing.remove();

        const label = type === 'section' ? 'Section name' : 'Request text';
        const placeholder = type === 'section' ? 'e.g. Legal, Financial, Operations' : 'Enter the full request text — Dealspace will automatically show a concise summary in Summary View';

        const tr = document.createElement('tr');
        tr.id = 'inlineAddRow';
        tr.setAttribute('data-parent', parentId);
        tr.setAttribute('data-addtype', type);
        tr.innerHTML = `
          <td></td>
          <td colspan="12" style="padding:8px 10px 8px 40px">
            <div style="display:flex;align-items:center;gap:8px">
              <input id="inlineAddInput" type="text" placeholder="${placeholder}"
                style="flex:1;padding:6px 10px;border-radius:6px;border:1px solid var(--ds-ac);background:var(--ds-bg);color:var(--ds-tx);font-size:13px;outline:none"
                onkeydown="if(event.key==='Enter')submitInlineAdd();if(event.key==='Escape')cancelInlineAdd()">
              <button onclick="submitInlineAdd()" style="padding:5px 14px;border-radius:6px;border:none;background:var(--ds-ac);color:var(--ds-act);font-size:12px;font-weight:600;cursor:pointer">Add</button>
              <button onclick="cancelInlineAdd()" style="padding:5px 10px;border-radius:6px;border:1px solid var(--ds-bd);background:none;color:var(--ds-tx3);font-size:12px;cursor:pointer">Cancel</button>
            </div>
          </td>`;

        // Insert after the parent row
        const parentRow = document.querySelector(`tr[data-id="${parentId}"]`);
        if (parentRow && parentRow.nextSibling) {
          parentRow.parentNode.insertBefore(tr, parentRow.nextSibling);
        } else if (parentRow) {
          parentRow.parentNode.appendChild(tr);
        }

        document.getElementById('inlineAddInput').focus();
      }

      function cancelInlineAdd() {
        const el = document.getElementById('inlineAddRow');
        if (el) el.remove();
      }

      async function submitInlineAdd() {
        const tr = document.getElementById('inlineAddRow');
        if (!tr) return;
        const type = tr.getAttribute('data-addtype');
        const parentId = tr.getAttribute('data-parent');
        const text = document.getElementById('inlineAddInput').value.trim();
        if (!text) return;

        try {
          const endpoint = type === 'section'
            ? `/api/projects/${projectID}/sections`
            : `/api/projects/${projectID}/requests/new`;

          const res = await fetchAPI(endpoint, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({ name: text, title: text, parent_id: parentId })
          });
          if (!res.ok) throw new Error('Failed');
          cancelInlineAdd();
          await loadRequestTree();
        } catch(e) {
          document.getElementById('inlineAddInput').style.borderColor = 'red';
        }
      }

      async function renameListOrSection(id, type) {
        // Close the menu
        const menu = document.getElementById('menu-' + id);
        if (menu) menu.style.display = 'none';
        openMenuId = null;

        const item = treeData.find(t => t.entry_id === id);
        if (!item) return;
        const d = item.data || {};
        const currentName = d.name || d.title || '';
        const newName = prompt('Rename ' + (type === 'list' ? 'list' : 'section') + ':', currentName);
        if (!newName || !newName.trim() || newName.trim() === currentName) return;

        const updated = { ...d, name: newName.trim(), title: newName.trim() };
        item.data = updated;
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + id, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(updated), version: item.version || 0 })
          });
          if (res.ok) {
            const result = await res.json();
            if (result.version) item.version = result.version;
            renderTree();
          }
        } catch(e) {
          loadRequestTree();
        }
      }

      function toggleCollapse(id) {
        if (collapsed.has(id)) collapsed.delete(id); else collapsed.add(id);
        renderTree();
      }

      // ---- Inline field update ----
      async function updateField(entryId, field, value) {
        const item = treeData.find(t => t.entry_id === entryId);
        if (!item) return;
        const d = { ...(item.data || {}), [field]: value };
        item.data = d;
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + entryId, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(d), version: item.version || 0 })
          });
          if (res.ok) {
            const result = await res.json();
            if (result.version) item.version = result.version;
            renderTree();
          }
        } catch(e) {
          console.error('Update failed:', e);
          loadRequestTree();
        }
      }

      // ---- Inline edit request title ----
      function editRequest(id, e) {
        if (e) e.stopPropagation();
        if (openMenuId) {
          const m = document.getElementById('menu-' + openMenuId);
          if (m) m.style.display = 'none';
          openMenuId = null;
        }
        const item = treeData.find(t => t.entry_id === id);
        if (!item) return;
        const d = item.data || {};
        const title = d.title || d.description || 'Untitled';
        const row = document.querySelector(`tr[data-id="${id}"]`);
        if (!row) return;
        const titleCell = row.querySelector('.req-title-cell');
        if (!titleCell) return;
        row.dataset.originalTitleHtml = titleCell.innerHTML;
        titleCell.innerHTML = `<div style="display:flex;flex-direction:column;gap:4px;width:100%">
          <textarea rows="2" style="width:100%;padding:6px 8px;background:#0a1628;border:1px solid rgba(201,168,76,.4);border-radius:6px;color:white;font-size:13px;outline:none;resize:vertical;line-height:1.4;font-family:inherit" id="edit-title-${id}"></textarea>
          <div style="display:flex;gap:4px">
            <button onclick="saveEditRequest('${id}')" style="padding:3px 12px;background:#c9a84c;color:#0a1628;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer">Save</button>
            <button onclick="cancelEditRequest('${id}')" style="padding:3px 10px;background:rgba(255,255,255,.08);color:white;border:none;border-radius:4px;font-size:11px;cursor:pointer">Cancel</button>
          </div>
        </div>`;
        const input = document.getElementById('edit-title-' + id);
        if (input) { input.value = title; input.focus(); input.setSelectionRange(input.value.length, input.value.length); }
      }

      function cancelEditRequest(id) {
        const row = document.querySelector(`tr[data-id="${id}"]`);
        if (!row) return;
        const titleCell = row.querySelector('.req-title-cell');
        if (titleCell && row.dataset.originalTitleHtml) titleCell.innerHTML = row.dataset.originalTitleHtml;
      }

      async function saveEditRequest(id) {
        const input = document.getElementById('edit-title-' + id);
        if (!input) return;
        const newTitle = input.value.trim();
        if (!newTitle) return;
        const item = treeData.find(t => t.entry_id === id);
        if (!item) return;
        const d = { ...(item.data || {}), title: newTitle };
        item.data = d;
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + id, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(d), version: item.version || 0 })
          });
          if (res.ok) {
            const result = await res.json();
            if (result.version) item.version = result.version;
            renderTree();
          }
        } catch(e) {
          console.error('Save failed:', e);
          cancelEditRequest(id);
        }
      }

      // ---- Actions menu ----
      function toggleMenu(e, id) {
        e.stopPropagation();
        if (openMenuId && openMenuId !== id) {
          const prev = document.getElementById('menu-' + openMenuId);
          if (prev) prev.style.display = 'none';
        }
        const menu = document.getElementById('menu-' + id);
        if (menu) {
          menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
          openMenuId = menu.style.display === 'block' ? id : null;
        }
      }
      document.addEventListener('click', () => {
        if (openMenuId) {
          const m = document.getElementById('menu-' + openMenuId);
          if (m) m.style.display = 'none';
          openMenuId = null;
        }
      });

      async function deleteEntry(entryID) {
        if (!confirm('Delete this entry?')) return;
        await fetchAPI('/api/projects/' + projectID + '/entries/' + entryID, { method: 'DELETE' });
        loadRequestTree();
      }

      // ---- Drag & Drop ----
      let dragEntryId = null;

      function onDragStart(e) {
        dragEntryId = e.currentTarget.dataset.id;
        e.dataTransfer.effectAllowed = 'move';
        e.currentTarget.style.opacity = '0.5';
      }

      function onDragOver(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        const tr = e.currentTarget;
        tr.classList.remove('drop-above', 'drop-below', 'drop-into');
        const rect = tr.getBoundingClientRect();
        const y = e.clientY - rect.top;
        const pct = y / rect.height;
        if (tr.dataset.type === 'section' && pct > 0.25 && pct < 0.75) {
          tr.classList.add('drop-into');
        } else if (pct < 0.5) {
          tr.classList.add('drop-above');
        } else {
          tr.classList.add('drop-below');
        }
      }

      function onDragLeave(e) {
        e.currentTarget.classList.remove('drop-above', 'drop-below', 'drop-into');
      }

      async function onDrop(e) {
        e.preventDefault();
        const tr = e.currentTarget;
        tr.classList.remove('drop-above', 'drop-below', 'drop-into');
        document.querySelectorAll('#reqTree tr').forEach(r => r.style.opacity = '');

        if (!dragEntryId || dragEntryId === tr.dataset.id) return;

        const targetId = tr.dataset.id;
        const targetType = tr.dataset.type;
        const rect = tr.getBoundingClientRect();
        const y = e.clientY - rect.top;
        const pct = y / rect.height;

        let newParentId, position;

        if (targetType === 'section' && pct > 0.25 && pct < 0.75) {
          newParentId = targetId;
          const children = treeData.filter(t => t.parent_id === targetId);
          position = children.length;
        } else {
          newParentId = tr.dataset.parent;
          const siblings = treeData.filter(t => t.parent_id === newParentId);
          const targetIdx = siblings.findIndex(s => s.entry_id === targetId);
          position = pct < 0.5 ? targetIdx : targetIdx + 1;
        }

        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + dragEntryId + '/move', {
            method: 'POST',
            body: JSON.stringify({ parent_id: newParentId, position })
          });
          await loadRequestTree();
        } catch(e) {
          console.error('Move failed:', e);
        }
        dragEntryId = null;
      }

      // ---- Attach answer modal ----
      function showAttachModalById(reqId) {
        const item = treeData.find(t => t.entry_id === reqId);
        const d = item ? (item.data || {}) : {};
        const title = d.title || d.description || 'Untitled';
        showAttachModal(reqId, title);
      }

      function showAttachModal(reqId, reqTitle) {
        attachRequestId = reqId;
        document.getElementById('attachReqTitle').textContent = reqTitle;
        document.getElementById('attachModal').style.display = 'flex';
        document.getElementById('attachSearch').value = '';
        document.getElementById('attachFile').value = '';
        loadAnswersForPicker('');
        loadLinkedAnswers(reqId);
      }
      function closeAttachModal() { document.getElementById('attachModal').style.display = 'none'; attachRequestId = null; }

      let searchTimeout;
      function searchAnswers(q) {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => loadAnswersForPicker(q), 200);
      }

      async function loadAnswersForPicker(q) {
        const list = document.getElementById('attachList');
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/answers?q=' + encodeURIComponent(q));
          const answers = await res.json();
          if (!answers || answers.length === 0) {
            list.innerHTML = '<div class="text-[#b0bec5] text-sm py-2">No documents found.</div>';
            return;
          }
          list.innerHTML = answers.map(a => {
            const d = a.data || {};
            const name = d.filename || d.name || d.title || 'Document';
            const objectID = d.object_id || '';
            const previewUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '/preview?filename=' + encodeURIComponent(name) : '';
            return `<div class="flex items-center justify-between px-3 py-2 rounded-lg hover:bg-white/[0.04] transition">
              <span class="text-white text-sm truncate flex-1">${escHtml(name)}</span>
              <div class="flex items-center gap-1.5 shrink-0 ml-2">
                ${previewUrl ? `<a href="${previewUrl}" target="_blank" class="px-2 py-1 bg-white/[0.06] text-[#b0bec5] hover:text-white rounded text-xs font-medium transition">Preview</a>` : ''}
                <button onclick="linkAnswer('${a.entry_id}')" class="px-3 py-1 bg-[#c9a84c]/20 text-[#c9a84c] rounded text-xs font-medium hover:bg-[#c9a84c]/30 transition">Link</button>
              </div>
            </div>`;
          }).join('');
        } catch(e) {
          list.innerHTML = '<div class="text-red-400 text-sm py-2">Failed to load.</div>';
        }
      }

      async function loadLinkedAnswers(reqId) {
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/requests/' + reqId + '/links');
          const links = await res.json();
          if (links && links.length > 0) {
            const linkedHtml = links.map(l => {
              const d = l.data || {};
              const name = d.filename || d.name || 'Document';
              return `<div class="flex items-center justify-between px-3 py-2 rounded-lg bg-green-500/5 border border-green-500/10">
                <span class="text-green-300 text-sm truncate flex-1">${escHtml(name)}</span>
                <button onclick="unlinkAnswer('${l.answer_id}')" class="ml-2 px-3 py-1 bg-red-500/20 text-red-300 rounded text-xs font-medium hover:bg-red-500/30 transition">Unlink</button>
              </div>`;
            }).join('');
            const list = document.getElementById('attachList');
            list.innerHTML = '<div class="text-[#b0bec5] text-xs font-medium mb-1 mt-1">LINKED</div>' + linkedHtml + '<div class="border-t border-white/[0.08] my-2"></div><div class="text-[#b0bec5] text-xs font-medium mb-1">AVAILABLE</div>' + list.innerHTML;
          }
        } catch(e) {}
      }

      async function linkAnswer(answerId) {
        if (!attachRequestId) return;
        await fetchAPI('/api/projects/' + projectID + '/requests/' + attachRequestId + '/links', {
          method: 'POST', body: JSON.stringify({ answer_id: answerId })
        });
        closeAttachModal();
        loadRequestTree();
      }

      async function unlinkAnswer(answerId) {
        if (!attachRequestId) return;
        await fetchAPI('/api/projects/' + projectID + '/requests/' + attachRequestId + '/links/' + answerId, { method: 'DELETE' });
        showAttachModal(attachRequestId, document.getElementById('attachReqTitle').textContent);
      }

      async function uploadAndLink() {
        const fileInput = document.getElementById('attachFile');
        const file = fileInput.files[0];
        if (!file || !attachRequestId) return;

        const fd = new FormData();
        fd.append('file', file);
        const uploadRes = await fetch('/api/projects/' + projectID + '/objects', {
          method: 'POST', headers: { 'Authorization': 'Bearer ' + token }, body: fd
        });
        const uploadData = await uploadRes.json();
        if (!uploadRes.ok) { alert('Upload failed'); return; }

        const answerData = JSON.stringify({ filename: file.name, object_id: uploadData.object_id, name: file.name });
        const entryRes = await fetchAPI('/api/projects/' + projectID + '/entries', {
          method: 'POST',
          body: JSON.stringify({ project_id: projectID, parent_id: projectID, type: 'answer', depth: 1, data: answerData, stage: 'dataroom' })
        });
        const entry = await entryRes.json();

        if (entry.entry_id) {
          await fetchAPI('/api/projects/' + projectID + '/requests/' + attachRequestId + '/links', {
            method: 'POST', body: JSON.stringify({ answer_id: entry.entry_id })
          });
        }

        closeAttachModal();
        loadRequestTree();
      }

      // ---- Orgs + Team ----
      // ---- Organizations ----
      let allGlobalOrgs = [];

      let _dealOrgsMap = {};
      function imgErr(img) {
        const w = img.parentElement;
        w.className = 'w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center';
        w.innerHTML = '<span class="text-[#c9a84c] font-semibold">' + escHtml(img.dataset.initial || '?') + '</span>';
      }
      function renderMemberCard(dealOrgId, m, mi) {
        const initial = (m.name || m.email || '?')[0].toUpperCase();
        let avatarHtml;
        if (m.photo) {
          avatarHtml = '<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden">'
            + '<img src="' + escHtml(m.photo) + '" class="w-full h-full object-cover" data-initial="' + escHtml(initial) + '" onerror="imgErr(this)">'
            + '</div>';
        } else {
          avatarHtml = '<div class="w-11 h-11 rounded-full shrink-0 overflow-hidden bg-[#c9a84c]/20 flex items-center justify-center">'
            + '<span class="text-[#c9a84c] font-semibold">' + escHtml(initial) + '</span></div>';
        }
        const nameHtml = '<div class="text-sm font-medium truncate" style="color:var(--ds-tx)">' + escHtml(m.name || m.email || '') + '</div>';
        const titleHtml = m.title ? '<div class="text-xs truncate" style="color:var(--ds-tx3)">' + escHtml(m.title) + '</div>' : '';
        return '<div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openPersonPanel(\'' + dealOrgId + '\', ' + mi + ')">'
          + avatarHtml + '<div class="min-w-0">' + nameHtml + titleHtml + '</div></div>';
      }

      async function loadOrgs() {
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/orgs');
          const orgs = await res.json();
          _dealOrgsMap = {};
          if (Array.isArray(orgs)) orgs.forEach(o => {
            o._raw = { org_id: o.org_id, role: o.role, domain_lock: o.domain_lock, permissions: o.permissions, members: o.members };
            // Store org detail fields for edit modal
            o.org_details = {
              name: o.org_name || '', description: o.org_description || '', role: o.role || '',
              industry: o.org_industry || '', website: o.org_website || '', phone: o.org_phone || '',
              address: o.org_address || '', city: o.org_city || '', state: o.org_state || '',
              founded: o.org_founded || '', linkedin: o.org_linkedin || '', logo: o.org_logo || '',
            };
            _dealOrgsMap[o.deal_org_id] = o;
          });
          const list = document.getElementById('orgList');
          if (!orgs || orgs.length === 0) {
            list.innerHTML = '<div class="text-[#b0bec5] text-sm">No organizations added yet. Use "+ Add Org" to add parties to this deal.</div>';
            return;
          }
          list.innerHTML = orgs.map(o => {
            const rc = roleColors[o.role] || 'bg-gray-500/20 text-gray-300';
            const roleLabel = { buyer: 'Buyer', seller: 'Seller', ib: 'IB Advisor', advisor: 'Advisor' }[o.role] || o.role || '?';
            const perms = o.permissions || {};
            const members = o.members || [];
            const dlBadge = { full: '📥 Full download', watermark: '📥 Watermarked', none: '🚫 No download' }[perms.download] || '📥 Watermarked';
            const orgDesc = o.org_description || '';
            const orgLogo = o.org_logo || '';
            const orgIndustry = o.org_industry || '';
            return `<div class="rounded-2xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
              <!-- Org header -->
              <div class="px-6 py-5">
                <div class="flex items-start gap-4">
                  ${orgLogo ? `<img src="${escHtml(orgLogo)}" class="w-14 h-14 rounded-xl object-contain shrink-0 bg-white p-1.5" onerror="this.style.display='none'">` : `<div class="w-14 h-14 rounded-xl shrink-0 flex items-center justify-center text-2xl font-black" style="background:var(--ds-ac);color:var(--ds-act)">${escHtml((o.org_name||'?')[0])}</div>`}
                  <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-3">
                      <h2 class="text-2xl font-black tracking-tight" style="color:var(--ds-tx)">${escHtml(o.org_name || 'Unknown')}</h2>
                      <span class="px-2.5 py-1 rounded-full text-xs font-semibold ${rc}">${roleLabel}</span>
                    </div>
                    ${orgDesc ? `<p class="text-sm mt-1 line-clamp-2" style="color:var(--ds-tx2)">${escHtml(orgDesc)}</p>` : ''}
                    <div class="flex flex-wrap gap-3 text-xs mt-2" style="color:var(--ds-tx3)">
                      <span>${dlBadge}</span>
                      ${perms.upload ? '<span>📤 Upload</span>' : ''}
                      <span>${(() => {
                        const vl = perms.visible_lists;
                        if (!vl || vl === 'all') return '📂 All lists';
                        if (Array.isArray(vl) && vl.length === 0) return '📂 No lists';
                        if (Array.isArray(vl)) return '📂 ' + vl.length + ' list' + (vl.length > 1 ? 's' : '');
                        return '📂 All lists';
                      })()}</span>
                    </div>
                  </div>
                  <div class="flex items-center gap-2 shrink-0">
                    <button onclick="openPermModalById('${o.deal_org_id}')"
                      class="px-3 py-1.5 rounded-lg text-xs font-medium transition" style="background:var(--ds-hv);color:var(--ds-tx2)">Permissions</button>
                    <div class="relative" id="orgMenu_${o.deal_org_id}">
                      <button onclick="toggleOrgMenu('${o.deal_org_id}')"
                        class="px-2 py-1.5 rounded-lg text-sm font-medium transition" style="background:var(--ds-hv);color:var(--ds-tx2)" title="More options">⋯</button>
                      <div id="orgMenuDrop_${o.deal_org_id}" class="hidden absolute right-0 top-full mt-1 rounded-lg shadow-xl z-30 py-1 min-w-[160px]" style="background:var(--ds-card);border:1px solid var(--ds-bd)">
                        <button onclick="openEditOrgModal('${o.deal_org_id}');closeOrgMenu('${o.deal_org_id}')"
                          class="w-full text-left px-4 py-2 text-sm transition hover:opacity-80" style="color:var(--ds-tx)">Edit details</button>
                        <button onclick="openPermModalById('${o.deal_org_id}');closeOrgMenu('${o.deal_org_id}')"
                          class="w-full text-left px-4 py-2 text-sm transition hover:opacity-80" style="color:var(--ds-tx)">Permissions</button>
                        <div style="height:1px;background:var(--ds-bd);margin:4px 0"></div>
                        <button onclick="removeDealOrg('${o.deal_org_id}', '${escHtml(orgName)}')"
                          class="w-full text-left px-4 py-2 text-sm transition hover:opacity-80" style="color:#ef4444">Remove from deal</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Members -->
              <div class="border-t px-6 py-4" style="border-color:var(--ds-bd)">
                <div class="grid gap-3" style="grid-template-columns: repeat(auto-fill, minmax(180px, 1fr))">
                  ${members.map((m, mi) => renderMemberCard(o.deal_org_id, m, mi)).join('')}
                  <div class="flex items-center gap-3 cursor-pointer hover:opacity-80 transition" onclick="openDealMemberPicker('' + o.deal_org_id + '', '' + escHtml(o.org_id) + '', '' + escHtml(o.org_name||'') + '')">
                    <div class="w-11 h-11 rounded-full shrink-0 flex items-center justify-center text-xl" style="background:var(--ds-hv);color:var(--ds-tx2)">+</div>
                    <span class="text-sm" style="color:var(--ds-tx3)">Add person</span>
                  </div>
                </div>
              </div>
            </div>`;
          }).join('');
        } catch(e) { console.error(e); }
      }

      // ---- Add Party Modal (3-step scrape flow) ----
      let scrapedData = null;

      function resetAddOrgForm() {
        scrapedData = null;
        // Step 1
        document.getElementById('addOrgEmail').value = '';
        document.getElementById('scrapeError').classList.add('hidden');
        document.getElementById('scrapeLoading').classList.add('hidden');
        document.getElementById('scrapeBtn').disabled = false;
        // Hide wizard-only fields
        document.getElementById('wizProjectNameWrap').classList.add('hidden');
        document.getElementById('wizProjectName').value = '';
        // Step 2 — clear all org fields
        const clearIds = ['orgName','orgDesc','orgRole','orgIndustry','orgWebsite','orgPhone',
                          'orgAddress','orgCity','orgState','orgFounded','orgLinkedIn'];
        clearIds.forEach(id => { const el = document.getElementById(id); if (el) el.value = ''; });
        document.getElementById('orgLogoWrap').classList.add('hidden');
        document.getElementById('orgLogoImg').src = '';
        // Step 3 — clear people
        const pl = document.getElementById('peopleList'); if (pl) pl.innerHTML = '';
        const np = document.getElementById('noPeople'); if (np) np.classList.remove('hidden');
        // Required field errors
        requiredFields.forEach(id => document.getElementById(id).classList.remove('field-error'));
      }

      function openAddOrgModal() {
        resetAddOrgForm();
        document.getElementById('addOrgTitle').textContent = 'Add Party';
        document.getElementById('addOrgHint').textContent = "Enter an email address or domain name \u2014 we'll look up the organization automatically.";
        document.getElementById('addOrgSubmitBtn').textContent = 'Add to Deal';
        showAddOrgStep(1);
        document.getElementById('addOrgModal').classList.remove('hidden');
        setTimeout(() => document.getElementById('addOrgEmail').focus(), 100);
      }

      function switchProject(pid) {
        document.getElementById('projectMenu').classList.add('hidden');
        if (pid && pid !== projectID) window.location.href = '/app/projects/' + pid;
      }
      function toggleProjectMenu() {
        document.getElementById('projectMenu').classList.toggle('hidden');
      }
      document.addEventListener('click', e => {
        if (!document.getElementById('projectSwitcher')?.contains(e.target))
          document.getElementById('projectMenu')?.classList.add('hidden');
      });

      function tmplChanged(el) {
        if (el.value === 'none' && el.checked) {
          // "Start empty" unchecks the others
          document.querySelectorAll('.tmpl-cb').forEach(cb => { if (cb.value !== 'none') cb.checked = false; });
        } else if (el.value !== 'none' && el.checked) {
          // Selecting a template unchecks "Start empty"
          document.querySelector('.tmpl-cb[value="none"]').checked = false;
        }
      }

      // ---- New Project Wizard: Create Everything ----
      async function createNewProject() {
        const btn = document.getElementById('wizCreateBtn');
        const projectName = document.getElementById('wizProjectName').value.trim();
        const wizErr = document.getElementById('wizError');
        if (wizErr) wizErr.classList.add('hidden');
        const projNameEl = document.getElementById('wizProjectName');
        if (!projectName) {
          if (projNameEl) projNameEl.classList.add('field-error');
          if (wizErr) { wizErr.textContent = 'Deal name is required.'; wizErr.classList.remove('hidden'); }
          return;
        }
        if (projNameEl) projNameEl.classList.remove('field-error');
        if (!validateStep2()) {
          if (wizErr) { wizErr.textContent = 'Please fill in all required org fields. Go back to step 2.'; wizErr.classList.remove('hidden'); }
          return;
        }

        btn.disabled = true; btn.textContent = 'Creating...';

        try {
          // 1. Create project
          const projRes = await fetchAPI('/api/projects', {
            method: 'POST',
            body: JSON.stringify({ name: projectName, deal_type: 'sell_side' })
          });
          const projData = await projRes.json();
          if (!projRes.ok) throw new Error(projData.error || 'Failed to create project');
          const newProjectID = projData.project_id || projData.entry_id;

          // 2. Add org + members to project
          const name = document.getElementById('orgName').value.trim();
          const role = document.getElementById('orgRole').value;
          // Derive domain: prefer scrapedData.domain, fallback to website field
        let domain = scrapedData?.domain || '';
        if (!domain) {
          const ws = document.getElementById('orgWebsite').value.trim();
          if (ws) {
            domain = ws.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0];
          }
        }
          const people = scrapedData?.people || [];
          const selectedMembers = [];
          document.querySelectorAll('.person-cb:checked').forEach(cb => {
            const p = people[parseInt(cb.dataset.idx)];
            if (p) selectedMembers.push({ name: p.name, email: p.email || '', title: p.title || '', phone: p.phone || '', photo: p.photo || '', bio: p.bio || '', linkedin: p.linkedin || '' });
          });

          const orgRes = await fetchAPI('/api/projects/' + newProjectID + '/orgs/add', {
            method: 'POST',
            body: JSON.stringify({
              name,
              domains: domain ? [domain] : [],
              role,
              logo: scrapedData?.logo || '',
              website: document.getElementById('orgWebsite').value,
              description: document.getElementById('orgDesc').value,
              industry: document.getElementById('orgIndustry').value,
              phone: document.getElementById('orgPhone').value,
              address: document.getElementById('orgAddress').value,
              city: document.getElementById('orgCity').value,
              state: document.getElementById('orgState').value,
              founded: document.getElementById('orgFounded').value,
              linkedin: document.getElementById('orgLinkedIn').value,
              members: selectedMembers,
              domain_lock: true,
            })
          });
          if (!orgRes.ok) { const e = await orgRes.json(); throw new Error(e.error || 'Failed to add org'); }

          // 3. Import selected request list templates
          const selectedTemplates = [...document.querySelectorAll('.tmpl-cb:checked')].map(cb => cb.value).filter(v => v !== 'none');
          for (const tmpl of selectedTemplates) {
            try {
              await fetchAPI('/api/projects/' + newProjectID + '/requests/import-template', {
                method: 'POST',
                body: JSON.stringify({ template_id: tmpl })
              });
            } catch(e) { console.error('Template import error:', tmpl, e); }
          }

          // 4. Show email preview and redirect
          closeAddOrgModal();
          if (selectedMembers.length > 0) {
            showEmailPreview(selectedMembers, name);
          }
          // Redirect to the new project
          window.location.href = '/app/projects/' + newProjectID;

        } catch(e) {
          alert(e.message);
          btn.disabled = false;
          btn.textContent = 'Create Project';
        }
      }

      // ---- Email Preview ----
      const EMAIL_WHITELIST = ['@muskepo.com', '@jongsma.me'];
      function isWhitelisted(email) {
        return EMAIL_WHITELIST.some(d => email.toLowerCase().endsWith(d));
      }

      function showEmailPreview(members, orgName) {
        const list = document.getElementById('emailPreviewList');
        if (!members.length) { return; }
        list.innerHTML = members.map(m => {
          const whitelisted = m.email && isWhitelisted(m.email);
          return `<div class="flex items-center gap-3 p-3 rounded-lg" style="background:var(--ds-hv)">
            <div class="flex-1 min-w-0">
              <div class="text-sm font-medium" style="color:var(--ds-tx)">${escHtml(m.name || m.email || '?')}</div>
              <div class="text-xs" style="color:var(--ds-tx2)">${escHtml(m.email || 'no email')}</div>
            </div>
            ${m.email ? (whitelisted
              ? '<span class="text-xs px-2 py-0.5 rounded-full bg-green-500/20 text-green-300 shrink-0">Will send</span>'
              : '<span class="text-xs px-2 py-0.5 rounded-full bg-yellow-500/20 text-yellow-300 shrink-0">Blocked (not whitelisted)</span>'
            ) : '<span class="text-xs px-2 py-0.5 rounded-full bg-gray-500/20 text-gray-300 shrink-0">No email</span>'}
          </div>`;
        }).join('');
        document.getElementById('emailPreviewModal').classList.remove('hidden');
      }

      function closeEmailPreview() {
        document.getElementById('emailPreviewModal').classList.add('hidden');
      }

      function closeAddOrgModal() {
        document.getElementById('addOrgModal').classList.add('hidden');
        resetAddOrgForm();
      }

      function showAddOrgStep(n) {
        document.getElementById('addOrgStep1').classList.toggle('hidden', n !== 1);
        document.getElementById('addOrgStep2').classList.toggle('hidden', n !== 2);
        document.getElementById('addOrgStep3').classList.toggle('hidden', n !== 3);
        document.getElementById('addOrgStep4').classList.toggle('hidden', n !== 4);
        // Clear error banners when navigating
        ['step2Error','step3Error','wizError'].forEach(id => { const el=document.getElementById(id); if(el) el.classList.add('hidden'); });
        if (n === 3) renderPeople();
        if (n === 4) {
          // Pre-fill project name from org name
          const orgName = document.getElementById('orgName').value.trim();
          document.getElementById('wizProjectName').value = orgName;
        }
      }

      const requiredFields = ['orgName', 'orgRole'];

      function highlightRequired() {
        requiredFields.forEach(id => {
          const el = document.getElementById(id);
          if (!el.value.trim()) {
            el.classList.add('field-error');
          } else {
            el.classList.remove('field-error');
          }
        });
      }

      function validateStep2() {
        highlightRequired();
        return requiredFields.every(id => document.getElementById(id).value.trim());
      }

      function showStep2Error(msg) {
        const el = document.getElementById('step2Error');
        if (!el) return;
        el.textContent = msg || 'Please fill in all required fields.';
        el.classList.remove('hidden');
      }

      function hideStep2Error() {
        const el = document.getElementById('step2Error');
        if (el) el.classList.add('hidden');
      }

      function advanceFromStep2() {
        if (!validateStep2()) {
          showStep2Error('Please fill in all required fields (highlighted in red).');
          return;
        }
        hideStep2Error();
        showAddOrgStep(3);
      }

      // Clear red border on input/change
      [...requiredFields, 'wizProjectName'].forEach(id => {
        const el = document.getElementById(id);
        if (el) {
          const clear = () => el.classList.remove('field-error');
          el.addEventListener('input', clear);
          el.addEventListener('change', clear);
        }
      });

      function ensureEmailPerson(email) {
        if (!scrapedData) scrapedData = { domain: '', people: [] };
        if (!scrapedData.people) scrapedData.people = [];
        const found = scrapedData.people.find(p => p.email && p.email.toLowerCase() === email.toLowerCase());
        if (!found) {
          scrapedData.people.unshift({ name: '', email: email, title: '', phone: '', photo: '', bio: '', linkedin: '' });
        }
      }

      function skipScrape() {
        const input = document.getElementById('addOrgEmail').value.trim();
        const isEmail = input.includes('@');
        const domain = isEmail ? input.split('@')[1] : input.replace(/^https?:\/\//, '').replace(/\/.*$/, '');
        const people = isEmail ? [{ name: '', email: input, title: '', phone: '', photo: '', bio: '', linkedin: '' }] : [];
        scrapedData = { domain, people };
        document.getElementById('orgLogoWrap').classList.add('hidden');
        document.getElementById('orgName').value = '';
        document.getElementById('orgDesc').value = '';
        document.getElementById('orgIndustry').value = '';
        document.getElementById('orgWebsite').value = domain ? 'https://' + domain : '';
        document.getElementById('orgPhone').value = '';
        document.getElementById('orgAddress').value = '';
        document.getElementById('orgCity').value = '';
        document.getElementById('orgState').value = '';
        document.getElementById('orgFounded').value = '';
        document.getElementById('orgLinkedIn').value = '';
        highlightRequired();
        showAddOrgStep(2);
      }

      async function scrapeOrg() {
        let input = document.getElementById('addOrgEmail').value.trim();
        if (!input) {
          document.getElementById('scrapeErrorMsg').textContent = 'Enter an email address or domain name.';
          document.getElementById('scrapeError').classList.remove('hidden');
          return;
        }
        // If no @, treat as domain — fabricate an email for the API
        const email = input.includes('@') ? input : 'info@' + input.replace(/^https?:\/\//, '').replace(/\/.*$/, '');
        document.getElementById('scrapeError').classList.add('hidden');
        document.getElementById('scrapeLoading').classList.remove('hidden');
        document.getElementById('scrapeBtn').disabled = true;
        try {
          const res = await fetchAPI('/api/scrape/org', { method: 'POST', body: JSON.stringify({ email }) });
          const data = await res.json();
          if (!res.ok) throw new Error(data.error || 'Scrape failed');
          scrapedData = data;
          if (data.logo) {
            document.getElementById('orgLogoImg').src = data.logo;
            document.getElementById('orgLogoWrap').classList.remove('hidden');
          } else {
            document.getElementById('orgLogoWrap').classList.add('hidden');
          }
          document.getElementById('orgName').value = data.name || '';
          document.getElementById('orgDesc').value = data.description || '';
          document.getElementById('orgIndustry').value = data.industry || '';
          document.getElementById('orgWebsite').value = data.website || '';
          document.getElementById('orgPhone').value = data.phone || '';
          document.getElementById('orgAddress').value = data.address || '';
          document.getElementById('orgCity').value = data.city || '';
          document.getElementById('orgState').value = data.state || '';
          document.getElementById('orgFounded').value = data.founded || '';
          document.getElementById('orgLinkedIn').value = data.linkedin || '';
          // Ensure the original email person is in the people list (only if real email, not fabricated)
          if (input.includes('@')) ensureEmailPerson(email);
          highlightRequired();
          showAddOrgStep(2);
        } catch (err) {
          document.getElementById('scrapeErrorMsg').textContent = err.message;
          document.getElementById('scrapeError').classList.remove('hidden');
        } finally {
          document.getElementById('scrapeLoading').classList.add('hidden');
          document.getElementById('scrapeBtn').disabled = false;
        }
      }

      function renderPeople() {
        try {
        const people = scrapedData?.people || [];
        const list = document.getElementById('peopleList');
        const none = document.getElementById('noPeople');
        if (!list) { console.error('peopleList element not found'); return; }
        if (people.length === 0) { list.innerHTML = ''; if(none) none.classList.remove('hidden'); return; }
        if(none) none.classList.add('hidden');
        list.innerHTML = people.map((p, i) => {
          const hasDetail = p.name && p.title;
          return `
          <div class="flex items-center gap-3 p-3 rounded-xl bg-white/[0.03] border border-white/[0.06] transition">
            <input type="checkbox" class="person-cb accent-[#c9a84c] rounded shrink-0" data-idx="${i}" checked onchange="updateSelectedCount()">
            <div class="w-10 h-10 rounded-full bg-[#0a1628] shrink-0 overflow-hidden border border-white/[0.08]">
              ${p.photo ? `<img src="${escHtml(p.photo)}" class="w-full h-full object-cover" onerror="this.parentElement.innerHTML='<div class=\\'w-full h-full flex items-center justify-center text-[#c9a84c] font-semibold\\'>${escHtml((p.name||'?')[0])}</div>'">` : `<div class="w-full h-full flex items-center justify-center text-[#c9a84c] font-semibold">${escHtml((p.name||'?')[0])}</div>`}
            </div>
            <div class="flex-1 min-w-0 grid grid-cols-3 gap-2">
              <input type="text" value="${escHtml(p.name)}" placeholder="Name" data-idx="${i}" data-field="name" onchange="updatePerson(this)"
                class="px-2 py-1 bg-transparent border border-transparent hover:border-white/[0.08] focus:border-[#c9a84c] rounded text-white text-sm focus:outline-none ${hasDetail ? '' : 'border-white/[0.08]'}">
              <input type="text" value="${escHtml(p.email)}" placeholder="Email" data-idx="${i}" data-field="email" onchange="updatePerson(this)"
                class="px-2 py-1 bg-transparent border border-transparent hover:border-white/[0.08] focus:border-[#c9a84c] rounded text-[#b0bec5] text-xs focus:outline-none ${hasDetail ? '' : 'border-white/[0.08]'}">
              <input type="text" value="${escHtml(p.title)}" placeholder="Title" data-idx="${i}" data-field="title" onchange="updatePerson(this)"
                class="px-2 py-1 bg-transparent border border-transparent hover:border-white/[0.08] focus:border-[#c9a84c] rounded text-[#b0bec5] text-xs focus:outline-none ${hasDetail ? '' : 'border-white/[0.08]'}">
            </div>
          </div>`;
        }).join('');
        const sa = document.getElementById('selectAllPeople');
        if(sa) sa.checked = true;
        updateSelectedCount();
        } catch(err) { alert('renderPeople error: ' + err.message + '\n' + err.stack); }
      }

      function updatePerson(el) {
        const idx = parseInt(el.dataset.idx);
        const field = el.dataset.field;
        if (scrapedData?.people?.[idx]) {
          scrapedData.people[idx][field] = el.value.trim();
        }
      }

      function addManualPerson() {
        try {
          const name = document.getElementById('manualName').value.trim();
          const email = document.getElementById('manualEmail').value.trim();
          const title = document.getElementById('manualTitle').value.trim();
          if (!name && !email) {
            const nameEl = document.getElementById('manualName');
            nameEl.classList.add('field-error');
            nameEl.placeholder = 'Enter a name or email';
            setTimeout(() => { nameEl.classList.remove('field-error'); nameEl.placeholder = 'Name'; }, 2500);
            nameEl.focus();
            return;
          }
          if (!scrapedData) scrapedData = { domain: '', people: [] };
          if (!scrapedData.people) scrapedData.people = [];
          scrapedData.people.push({ name: name || email, email, title, phone: '', photo: '', bio: '', linkedin: '' });
          document.getElementById('manualName').value = '';
          document.getElementById('manualEmail').value = '';
          document.getElementById('manualTitle').value = '';
          renderPeople();
          document.getElementById('manualName').focus();
        } catch(err) {
          alert('addManualPerson error: ' + err.message + '\n' + err.stack);
        }
      }

      function toggleAllPeople(checked) {
        document.querySelectorAll('.person-cb').forEach(cb => cb.checked = checked);
        updateSelectedCount();
      }

      function updateSelectedCount() {
        const checked = document.querySelectorAll('.person-cb:checked').length;
        const total = document.querySelectorAll('.person-cb').length;
        document.getElementById('selectedCount').textContent = checked + ' of ' + total + ' selected';
        document.getElementById('selectAllPeople').checked = (checked === total);
      }

      function proceedFromStep3() {
        if (_wizardMode) {
          showAddOrgStep(4);
        } else {
          submitAddOrg();
        }
      }

      async function submitAddOrg() {
        const s3err = document.getElementById('step3Error');
        if (s3err) s3err.classList.add('hidden');
        if (!validateStep2()) {
          if (s3err) { s3err.textContent = 'Required fields missing: go back and fill in Name and Role.'; s3err.classList.remove('hidden'); }
          return;
        }
        const name = document.getElementById('orgName').value.trim();
        const role = document.getElementById('orgRole').value;

        // Derive domain: prefer scrapedData.domain, fallback to website field
        let domain = scrapedData?.domain || '';
        if (!domain) {
          const ws = document.getElementById('orgWebsite').value.trim();
          if (ws) {
            domain = ws.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0];
          }
        }
        const people = scrapedData?.people || [];
        const selectedMembers = [];
        document.querySelectorAll('.person-cb:checked').forEach(cb => {
          const p = people[parseInt(cb.dataset.idx)];
          if (p) selectedMembers.push({ name: p.name, email: p.email || '', title: p.title || '', phone: p.phone || '', photo: p.photo || '', bio: p.bio || '', linkedin: p.linkedin || '' });
        });

        const btn = document.getElementById('addOrgSubmitBtn');
        btn.disabled = true; btn.textContent = 'Adding...';

        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/orgs/add', {
            method: 'POST',
            body: JSON.stringify({
              name,
              domains: domain ? [domain] : [],
              role,
              logo: scrapedData?.logo || '',
              website: document.getElementById('orgWebsite').value,
              description: document.getElementById('orgDesc').value,
              industry: document.getElementById('orgIndustry').value,
              phone: document.getElementById('orgPhone').value,
              address: document.getElementById('orgAddress').value,
              city: document.getElementById('orgCity').value,
              state: document.getElementById('orgState').value,
              founded: document.getElementById('orgFounded').value,
              linkedin: document.getElementById('orgLinkedIn').value,
              members: selectedMembers,
              domain_lock: true,
            })
          });
          const data = await res.json();
          if (!res.ok) throw new Error(data.error || 'Failed to add organization');
          closeAddOrgModal();
          loadOrgs();
          // Show email preview if there are members with emails
          if (selectedMembers.length > 0) {
            showEmailPreview(selectedMembers, name);
          }
        } catch (err) { alert(err.message); }
        finally { btn.disabled = false; btn.textContent = 'Add to Deal'; }
      }

      // ---- Person Panel ----
      function openPersonPanel(dealOrgId, memberIdx) {
        const o = _dealOrgsMap[dealOrgId];
        if (!o) return;
        const members = o.members || [];
        const isNew = memberIdx < 0;
        const m = isNew ? { name: '', email: '', title: '', phone: '', photo: '', bio: '', linkedin: '' } : members[memberIdx];
        if (!m) return;

        document.getElementById('ppDealOrgId').value = dealOrgId;
        document.getElementById('ppMemberIdx').value = memberIdx;
        document.getElementById('ppName').value = m.name || '';
        document.getElementById('ppEmail').value = m.email || '';
        document.getElementById('ppTitle').value = m.title || '';
        document.getElementById('ppPhone').value = m.phone || '';
        document.getElementById('ppPhoto').value = m.photo || '';
        document.getElementById('ppLinkedIn').value = m.linkedin || '';
        document.getElementById('ppBio').value = m.bio || '';
        document.getElementById('personPanelTitle').textContent = isNew ? 'Add Person' : 'Edit Person';
        document.getElementById('ppRemoveBtn').classList.toggle('hidden', isNew);

        previewPersonPhoto();
        document.getElementById('ppPhotoUrlRow').classList.toggle('hidden', !!m.photo);

        document.getElementById('personOverlay').classList.remove('hidden');
        document.getElementById('personPanel').classList.remove('translate-x-full');
      }

      function closePersonPanel() {
        document.getElementById('personPanel').classList.add('translate-x-full');
        document.getElementById('personOverlay').classList.add('hidden');
      }

      function previewPersonPhoto() {
        const url = document.getElementById('ppPhoto').value.trim();
        const img = document.getElementById('ppPhotoImg');
        const letter = document.getElementById('ppPhotoLetter');
        if (url) {
          img.src = url;
          img.classList.remove('hidden');
          img.onerror = () => { img.classList.add('hidden'); letter.classList.remove('hidden'); };
          letter.classList.add('hidden');
        } else {
          img.classList.add('hidden');
          letter.classList.remove('hidden');
          const name = document.getElementById('ppName').value || document.getElementById('ppEmail').value || '?';
          letter.textContent = name[0].toUpperCase();
        }
      }

      async function savePersonPanel() {
        const dealOrgId = document.getElementById('ppDealOrgId').value;
        const memberIdx = parseInt(document.getElementById('ppMemberIdx').value);
        const o = _dealOrgsMap[dealOrgId];
        if (!o) return;

        const person = {
          name: document.getElementById('ppName').value.trim(),
          email: document.getElementById('ppEmail').value.trim(),
          title: document.getElementById('ppTitle').value.trim(),
          phone: document.getElementById('ppPhone').value.trim(),
          photo: document.getElementById('ppPhoto').value.trim(),
          linkedin: document.getElementById('ppLinkedIn').value.trim(),
          bio: document.getElementById('ppBio').value.trim(),
        };

        if (!person.name && !person.email) return;

        const members = [...(o.members || [])];
        if (memberIdx < 0) {
          members.push(person);
        } else {
          members[memberIdx] = person;
        }

        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + dealOrgId, {
            method: 'PUT',
            body: JSON.stringify({
              data: JSON.stringify({ ...o._raw, members }),
              version: o.version || 1
            })
          });
          closePersonPanel();
          loadOrgs();
        } catch (e) { alert(e.message); }
      }

      async function removePersonFromDeal() {
        const dealOrgId = document.getElementById('ppDealOrgId').value;
        const memberIdx = parseInt(document.getElementById('ppMemberIdx').value);
        const o = _dealOrgsMap[dealOrgId];
        if (!o || memberIdx < 0) return;

        const name = (o.members || [])[memberIdx]?.name || 'this person';
        if (!confirm('Remove ' + name + ' from this deal?')) return;

        const members = [...(o.members || [])];
        members.splice(memberIdx, 1);

        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + dealOrgId, {
            method: 'PUT',
            body: JSON.stringify({
              data: JSON.stringify({ ...o._raw, members }),
              version: o.version || 1
            })
          });
          closePersonPanel();
          loadOrgs();
        } catch (e) { alert(e.message); }
      }

      // ESC to close person panel
      document.addEventListener('keydown', e => {
        if (e.key === 'Escape' && !document.getElementById('personPanel').classList.contains('translate-x-full')) {
          closePersonPanel();
        }
      });

      // ---- Permissions Modal ----
      // ---- Deal Member Picker ----
      let _dmpDealOrgId = null;
      let _dmpOrgId = null;
      let _dmpAllMembers = []; // global org members

      async function openDealMemberPicker(dealOrgId, orgId, orgName) {
        _dmpDealOrgId = dealOrgId;
        _dmpOrgId = orgId;
        document.getElementById('dmpOrgName').textContent = orgName || '';
        document.getElementById('dmpSearch').value = '';
        document.getElementById('dmpAddError').classList.add('hidden');
        ['dmpNewName','dmpNewEmail','dmpNewTitle'].forEach(id => document.getElementById(id).value = '');
        document.getElementById('dmpList').innerHTML = '<div class="text-sm py-4 text-center" style="color:var(--ds-tx3)">Loading...</div>';
        document.getElementById('dealMemberPickerModal').classList.remove('hidden');

        // Load global org members
        try {
          const res = await fetchAPI('/api/orgs/' + orgId);
          const org = await res.json();
          _dmpAllMembers = org.members || [];
          // Mark which are already in the deal
          const dealOrg = _dealOrgsMap[dealOrgId] || {};
          const dealMembers = dealOrg.members || [];
          const dealEmails = new Set(dealMembers.map(m => (m.email||'').toLowerCase()));
          const dealNames = new Set(dealMembers.map(m => (m.name||'').toLowerCase()));
          renderDmpList(_dmpAllMembers, dealEmails, dealNames);
        } catch(e) {
          _dmpAllMembers = [];
          document.getElementById('dmpList').innerHTML = '<div class="text-sm py-4 text-center text-red-400">Failed to load members.</div>';
        }
      }

      function renderDmpList(members, dealEmails, dealNames) {
        const list = document.getElementById('dmpList');
        if (!dealEmails) {
          const dealOrg = _dealOrgsMap[_dmpDealOrgId] || {};
          const dm = dealOrg.members || [];
          dealEmails = new Set(dm.map(m => (m.email||'').toLowerCase()));
          dealNames = new Set(dm.map(m => (m.name||'').toLowerCase()));
        }
        if (members.length === 0) {
          list.innerHTML = '<div class="text-sm py-4 text-center" style="color:var(--ds-tx3)">No members in the global registry for this org yet. Add someone below.</div>';
          return;
        }
        const query = (document.getElementById('dmpSearch').value || '').toLowerCase();
        const filtered = query ? members.filter(m => (m.name||'').toLowerCase().includes(query) || (m.email||'').toLowerCase().includes(query)) : members;
        if (filtered.length === 0) {
          list.innerHTML = '<div class="text-sm py-4 text-center" style="color:var(--ds-tx3)">No matches</div>';
          return;
        }
        list.innerHTML = filtered.map((m, i) => {
          const inDeal = (m.email && dealEmails.has(m.email.toLowerCase())) || (m.name && dealNames.has(m.name.toLowerCase()));
          const initial = (m.name || m.email || '?')[0].toUpperCase();
          return '<label class="flex items-center gap-3 px-3 py-2.5 rounded-lg cursor-pointer transition ' + (inDeal ? 'opacity-50' : 'hover:opacity-80') + '" style="background:var(--ds-hv)">'
            + '<input type="checkbox" class="dmp-cb accent-[#c9a84c] shrink-0" data-idx="' + members.indexOf(m) + '" ' + (inDeal ? 'disabled checked' : '') + '>'
            + '<div class="w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-sm font-semibold" style="background:var(--ds-ac);color:var(--ds-act)">' + escHtml(initial) + '</div>'
            + '<div class="flex-1 min-w-0">'
            + '<div class="text-sm font-medium truncate" style="color:var(--ds-tx)">' + escHtml(m.name || m.email) + '</div>'
            + (m.title ? '<div class="text-xs truncate" style="color:var(--ds-tx3)">' + escHtml(m.title) + '</div>' : '')
            + '</div>'
            + (m.email ? '<div class="text-xs shrink-0" style="color:var(--ds-tx3)">' + escHtml(m.email) + '</div>' : '')
            + (inDeal ? '<span class="text-xs shrink-0 px-2 py-0.5 rounded-full" style="background:var(--ds-ac);color:var(--ds-act)">In deal</span>' : '')
            + '</label>';
        }).join('');
      }

      function filterDmpList() {
        renderDmpList(_dmpAllMembers, null, null);
      }

      function closeDealMemberPicker() {
        document.getElementById('dealMemberPickerModal').classList.add('hidden');
        _dmpDealOrgId = null; _dmpOrgId = null; _dmpAllMembers = [];
      }

      async function addNewDealMember() {
        const name = document.getElementById('dmpNewName').value.trim();
        const email = document.getElementById('dmpNewEmail').value.trim();
        const title = document.getElementById('dmpNewTitle').value.trim();
        const errEl = document.getElementById('dmpAddError');
        if (!name && !email) {
          errEl.textContent = 'Enter a name or email.';
          errEl.classList.remove('hidden');
          setTimeout(() => errEl.classList.add('hidden'), 2500);
          return;
        }
        errEl.classList.add('hidden');
        const newMember = { name, email, title, phone: '', photo: '', bio: '', linkedin: '' };

        // 1. Save to global org registry
        const orgRes = await fetchAPI('/api/orgs/' + _dmpOrgId);
        const org = await orgRes.json();
        const updatedGlobalMembers = [...(org.members || []), newMember];
        await fetchAPI('/api/orgs/' + _dmpOrgId + '/members', {
          method: 'PUT',
          body: JSON.stringify({ members: updatedGlobalMembers, version: org.version || 1 })
        });

        // 2. Add to deal too
        const dealOrg = _dealOrgsMap[_dmpDealOrgId] || {};
        const updatedDealMembers = [...(dealOrg.members || []), newMember];
        const raw = dealOrg._raw || {};
        await fetchAPI('/api/projects/' + projectID + '/entries/' + _dmpDealOrgId, {
          method: 'PUT',
          body: JSON.stringify({
            data: JSON.stringify({ ...raw, members: updatedDealMembers }),
            version: dealOrg.version || 1
          })
        });

        ['dmpNewName','dmpNewEmail','dmpNewTitle'].forEach(id => document.getElementById(id).value = '');
        _dmpAllMembers = updatedGlobalMembers;
        closeDealMemberPicker();
        loadOrgs();
      }

      async function confirmDealMemberAdd() {
        const checked = [...document.querySelectorAll('.dmp-cb:checked:not([disabled])')];
        if (checked.length === 0) { closeDealMemberPicker(); return; }
        const toAdd = checked.map(cb => _dmpAllMembers[parseInt(cb.dataset.idx)]).filter(Boolean);
        const dealOrg = _dealOrgsMap[_dmpDealOrgId] || {};
        const existing = dealOrg.members || [];
        const existEmails = new Set(existing.map(m => (m.email||'').toLowerCase()));
        const existNames = new Set(existing.map(m => (m.name||'').toLowerCase()));
        const fresh = toAdd.filter(m => {
          if (m.email && existEmails.has(m.email.toLowerCase())) return false;
          if (m.name && existNames.has(m.name.toLowerCase())) return false;
          return true;
        });
        if (fresh.length === 0) { closeDealMemberPicker(); return; }
        const updatedMembers = [...existing, ...fresh];
        const raw = dealOrg._raw || {};
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + _dmpDealOrgId, {
            method: 'PUT',
            body: JSON.stringify({
              data: JSON.stringify({ ...raw, members: updatedMembers }),
              version: dealOrg.version || 1
            })
          });
          if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed'); }
          closeDealMemberPicker();
          loadOrgs();
        } catch(e) { alert('Failed to add members: ' + e.message); }
      }

      // ---- Edit Org Modal ----
      function openEditOrgModal(dealOrgId) {
        const o = _dealOrgsMap[dealOrgId];
        if (!o) return;
        const d = o.org_details || {};

        document.getElementById('editOrgDealOrgId').value = dealOrgId;
        document.getElementById('editOrgVersion').value = o.version || 1;
        document.getElementById('editOrgName').value = d.name || o.org_name || '';
        document.getElementById('editOrgDesc').value = d.description || '';
        document.getElementById('editOrgRole').value = d.role || o.role || '';
        document.getElementById('editOrgIndustry').value = d.industry || '';
        document.getElementById('editOrgWebsite').value = d.website || '';
        document.getElementById('editOrgPhone').value = d.phone || '';
        document.getElementById('editOrgLinkedIn').value = d.linkedin || '';
        document.getElementById('editOrgFounded').value = d.founded || '';
        document.getElementById('editOrgAddress').value = d.address || '';
        document.getElementById('editOrgCity').value = d.city || '';
        document.getElementById('editOrgState').value = d.state || '';
        document.getElementById('editOrgLogo').value = d.logo || '';
        document.getElementById('editOrgError').classList.add('hidden');

        const logo = d.logo || '';
        if (logo) {
          document.getElementById('editOrgLogoImg').src = logo;
          document.getElementById('editOrgLogoWrap').classList.remove('hidden');
        } else {
          document.getElementById('editOrgLogoWrap').classList.add('hidden');
        }

        document.getElementById('editOrgModal').classList.remove('hidden');
      }

      function closeEditOrgModal() {
        document.getElementById('editOrgModal').classList.add('hidden');
      }

      function previewEditOrgLogo() {
        const url = document.getElementById('editOrgLogo').value.trim();
        const img = document.getElementById('editOrgLogoImg');
        const wrap = document.getElementById('editOrgLogoWrap');
        if (url) {
          img.src = url;
          wrap.classList.remove('hidden');
          img.onerror = () => wrap.classList.add('hidden');
        } else {
          wrap.classList.add('hidden');
        }
      }

      async function saveEditOrg() {
        const dealOrgId = document.getElementById('editOrgDealOrgId').value;
        const version = parseInt(document.getElementById('editOrgVersion').value) || 1;
        const name = document.getElementById('editOrgName').value.trim();
        const errEl = document.getElementById('editOrgError');
        errEl.classList.add('hidden');

        if (!name) {
          document.getElementById('editOrgName').classList.add('field-error');
          errEl.textContent = 'Name is required.';
          errEl.classList.remove('hidden');
          return;
        }

        const o = _dealOrgsMap[dealOrgId];
        if (!o) return;

        const updatedRaw = {
          ...(o._raw || {}),
          name,
          description: document.getElementById('editOrgDesc').value.trim(),
          role: document.getElementById('editOrgRole').value,
          industry: document.getElementById('editOrgIndustry').value.trim(),
          website: document.getElementById('editOrgWebsite').value.trim(),
          phone: document.getElementById('editOrgPhone').value.trim(),
          linkedin: document.getElementById('editOrgLinkedIn').value.trim(),
          founded: document.getElementById('editOrgFounded').value.trim(),
          address: document.getElementById('editOrgAddress').value.trim(),
          city: document.getElementById('editOrgCity').value.trim(),
          state: document.getElementById('editOrgState').value.trim(),
          logo: document.getElementById('editOrgLogo').value.trim(),
        };

        const btn = document.getElementById('editOrgSaveBtn');
        btn.disabled = true; btn.textContent = 'Saving...';

        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/orgs/' + dealOrgId, {
            method: 'PATCH',
            body: JSON.stringify({
              name: updatedRaw.name,
              description: updatedRaw.description,
              role: updatedRaw.role,
              industry: updatedRaw.industry,
              website: updatedRaw.website,
              phone: updatedRaw.phone,
              address: updatedRaw.address,
              city: updatedRaw.city,
              state: updatedRaw.state,
              founded: updatedRaw.founded,
              linkedin: updatedRaw.linkedin,
              logo: updatedRaw.logo,
              version,
            })
          });
          if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Save failed'); }
          closeEditOrgModal();
          loadOrgs();
        } catch(e) {
          errEl.textContent = e.message;
          errEl.classList.remove('hidden');
        } finally {
          btn.disabled = false; btn.textContent = 'Save Changes';
        }
      }

      // ---- Org card menu ----
      function toggleOrgMenu(dealOrgId) {
        const drop = document.getElementById('orgMenuDrop_' + dealOrgId);
        if (!drop) return;
        const isHidden = drop.classList.contains('hidden');
        // Close all other open org menus
        document.querySelectorAll('[id^="orgMenuDrop_"]').forEach(d => d.classList.add('hidden'));
        if (isHidden) drop.classList.remove('hidden');
      }

      function closeOrgMenu(dealOrgId) {
        const drop = document.getElementById('orgMenuDrop_' + dealOrgId);
        if (drop) drop.classList.add('hidden');
      }

      document.addEventListener('click', e => {
        if (!e.target.closest('[id^="orgMenu_"]')) {
          document.querySelectorAll('[id^="orgMenuDrop_"]').forEach(d => d.classList.add('hidden'));
        }
      });

      async function removeDealOrg(dealOrgId, orgName) {
        if (!confirm('Remove ' + orgName + ' from this deal? Their access will be revoked.')) return;
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + dealOrgId, { method: 'DELETE' });
          if (!res.ok) { const d = await res.json(); throw new Error(d.error || 'Failed to remove org'); }
          loadOrgs();
        } catch(e) { alert(e.message); }
      }

      function openPermModalById(dealOrgId) {
        const o = _dealOrgsMap[dealOrgId];
        if (!o) return;
        openPermModal(o.deal_org_id, o.org_id, o.role, o.version || 1, JSON.stringify(o.permissions || {}));
      }

      function openPermModal(dealOrgId, orgId, role, version, permsJson) {
        let perms = {};
        try { perms = JSON.parse(permsJson) || {}; } catch(e) {}
        document.getElementById('permModalDealOrgId').value = dealOrgId;
        document.getElementById('permModalOrgId').value = orgId;
        document.getElementById('permModalRole').value = role;
        document.getElementById('permModalVersion').value = version;
        const roleLabel = { buyer: 'Buyer', seller: 'Seller', ib: 'IB Advisor', advisor: 'Advisor' }[role] || role;
        document.getElementById('permModalTitle').textContent = 'Permissions — ' + roleLabel;
        document.getElementById('pmDownload').value = perms.download || 'watermark';
        document.getElementById('pmUpload').checked = !!perms.upload;
        document.getElementById('pmAddLists').checked = !!perms.add_request_lists;
        document.getElementById('pmEditLists').checked = !!perms.edit_request_lists;

        // Populate request list checkboxes
        const visibleLists = perms.visible_lists || null; // null = all
        const allChecked = visibleLists === null || visibleLists === 'all';
        document.getElementById('pmAllLists').checked = allChecked;
        const lists = treeData.filter(t => t.type === 'request_list');
        const container = document.getElementById('pmListChecks');
        container.innerHTML = lists.map(l => {
          const name = (l.data && l.data.name) ? l.data.name : 'Request List';
          const checked = allChecked || (Array.isArray(visibleLists) && visibleLists.includes(l.entry_id));
          return `<label class="flex items-center gap-2 text-sm text-white cursor-pointer">
            <input type="checkbox" class="pm-list-check w-3.5 h-3.5 accent-[#c9a84c]" value="${l.entry_id}" ${checked ? 'checked' : ''}>
            ${escHtml(name)}
          </label>`;
        }).join('');
        container.style.display = allChecked ? 'none' : 'block';
        document.getElementById('permModal').classList.remove('hidden');
      }

      function closePermModal() { document.getElementById('permModal').classList.add('hidden'); }

      function toggleAllLists(checked) {
        const container = document.getElementById('pmListChecks');
        container.style.display = checked ? 'none' : 'block';
        document.querySelectorAll('.pm-list-check').forEach(cb => cb.checked = checked);
      }

      async function savePermissions() {
        const dealOrgId = document.getElementById('permModalDealOrgId').value;
        const orgId = document.getElementById('permModalOrgId').value;
        const role = document.getElementById('permModalRole').value;
        const version = parseInt(document.getElementById('permModalVersion').value) || 1;
        const perms = {
          download: document.getElementById('pmDownload').value,
          upload: document.getElementById('pmUpload').checked,
          add_request_lists: document.getElementById('pmAddLists').checked,
          edit_request_lists: document.getElementById('pmEditLists').checked,
          visible_lists: document.getElementById('pmAllLists').checked
            ? 'all'
            : Array.from(document.querySelectorAll('.pm-list-check:checked')).map(cb => cb.value),
        };
        // Preserve existing members and other fields — only update permissions
        const o = _dealOrgsMap[dealOrgId] || {};
        const raw = o._raw || {};
        const updatedData = {
          org_id: orgId,
          role: raw.role || role,
          domain_lock: raw.domain_lock || false,
          members: raw.members || [],
          permissions: perms,
        };
        const btn = document.querySelector('#permModal button[onclick="savePermissions()"]');
        if (btn) { btn.disabled = true; btn.textContent = 'Saving...'; }
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + dealOrgId, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(updatedData), version })
          });
          const d = await res.json();
          if (!res.ok) throw new Error(d.error || 'Save failed (' + res.status + ')');
          closePermModal();
          loadOrgs();
        } catch(e) {
          alert('Failed to save permissions: ' + e.message);
        } finally {
          if (btn) { btn.disabled = false; btn.textContent = 'Save'; }
        }
      }

      function openPermissionsTemplateModal() {
        alert('Coming soon: set default permissions templates per org type for all deals.');
      }

      function switchTab(name, el) {
        document.querySelectorAll('.tab').forEach(t => { t.classList.remove('active','text-white'); t.classList.add('text-[#b0bec5]'); });
        el.classList.add('active','text-white'); el.classList.remove('text-[#b0bec5]');
        document.getElementById('tab-requests').classList.toggle('hidden', name !== 'requests');
        document.getElementById('tab-orgs').classList.toggle('hidden', name !== 'orgs');
        if (name === 'orgs') loadOrgs();
      }

      // ---- Import ----
      function openCreateListModal() {
        document.getElementById('createListName').value = '';
        document.getElementById('createListError').classList.add('hidden');
        document.getElementById('createListModal').style.display = 'flex';
        setTimeout(() => document.getElementById('createListName').focus(), 50);
      }
      function closeCreateListModal() { document.getElementById('createListModal').style.display = 'none'; }
      async function submitCreateList() {
        const name = document.getElementById('createListName').value.trim();
        if (!name) return;
        const btn = document.getElementById('createListBtn');
        btn.disabled = true; btn.textContent = 'Creating...';
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/requests', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({name})
          });
          if (!res.ok) { const e = await res.json(); throw new Error(e.message || 'Failed'); }
          closeCreateListModal();
          await loadRequestTree();
        } catch(e) {
          document.getElementById('createListError').textContent = e.message;
          document.getElementById('createListError').classList.remove('hidden');
        } finally {
          btn.disabled = false; btn.textContent = 'Create';
        }
      }

      // ---- Template picker ----
      let selectedTemplateID = null;

      async function openTemplateModal() {
        selectedTemplateID = null;
        document.getElementById('templateListName').value = '';
        document.getElementById('templateImportError').classList.add('hidden');
        document.getElementById('templateModal').style.display = 'flex';

        const list = document.getElementById('templateList');
        list.innerHTML = '<div class="text-sm text-[#94a3b8]">Loading...</div>';

        try {
          // Load saved DB templates
          const res = await fetchAPI('/api/templates');
          const saved = res.ok ? await res.json() : [];

          // Built-in templates
          const builtins = [
            { entry_id: 'core-8', name: 'Core Due Diligence', description: 'Essential 8 questions for any deal', item_count: 8, builtin: true },
            { entry_id: 'comprehensive-100', name: 'Comprehensive Due Diligence', description: '100+ questions across all workstreams', item_count: 104, builtin: true },
          ];

          const all = [...builtins, ...saved];
          if (all.length === 0) {
            list.innerHTML = '<div class="text-sm text-[#94a3b8] py-4 text-center">No templates yet. Import a list and save it as a template.</div>';
            return;
          }

          list.innerHTML = all.map(t => `
            <label class="flex items-start gap-3 p-3 rounded-lg cursor-pointer hover:bg-white/[0.04] transition" style="border:1px solid var(--ds-bd)">
              <input type="radio" name="tmpl" value="${t.entry_id}" class="mt-1 accent-[#c9a84c]" onchange="selectedTemplateID='${t.entry_id}'">
              <div>
                <div class="text-sm font-medium text-white">${escHtml(t.name)}</div>
                ${t.description ? `<div class="text-xs mt-0.5" style="color:var(--ds-tx2)">${escHtml(t.description)}</div>` : ''}
                <div class="text-xs mt-0.5" style="color:var(--ds-tx3)">${t.item_count} items${t.builtin ? ' · Built-in' : ''}</div>
              </div>
            </label>`).join('');
        } catch(e) {
          list.innerHTML = '<div class="text-sm text-red-400">Failed to load templates.</div>';
        }
      }

      function closeTemplateModal() {
        document.getElementById('templateModal').style.display = 'none';
      }

      async function submitTemplateImport() {
        if (!selectedTemplateID) {
          document.getElementById('templateImportError').textContent = 'Please select a template.';
          document.getElementById('templateImportError').classList.remove('hidden');
          return;
        }
        const btn = document.getElementById('templateImportBtn');
        btn.disabled = true; btn.textContent = 'Importing...';
        document.getElementById('templateImportError').classList.add('hidden');
        try {
          const name = document.getElementById('templateListName').value.trim();
          const res = await fetchAPI('/api/projects/' + projectID + '/requests/import-template', {
            method: 'POST',
            body: JSON.stringify({ template_id: selectedTemplateID, name })
          });
          const data = await res.json();
          if (!res.ok) throw new Error(data.error || 'Import failed');
          closeTemplateModal();
          await loadRequestTree();
        } catch(e) {
          document.getElementById('templateImportError').textContent = e.message;
          document.getElementById('templateImportError').classList.remove('hidden');
        } finally {
          btn.disabled = false; btn.textContent = 'Add to Deal';
        }
      }

      // Save an imported list as a template (called after import)
      async function offerSaveTemplate(listId, name, prebuiltItems) {
        try {
          // Collect items from the just-imported list
          let items = prebuiltItems;
          if (!items) {
            // Build items from treeData
            const listItem = treeData.find(t => t.entry_id === listId);
            if (!listItem) return;
            items = [];
            const sections = treeData.filter(t => t.parent_id === listId && t.type === 'section');
            for (const sec of sections) {
              const reqs = treeData.filter(t => t.parent_id === sec.entry_id && t.type === 'request');
              for (const req of reqs) {
                const d = req.data || {};
                items.push({ section: (sec.data||{}).name || sec.entry_id, title: d.title || req.summary || '', priority: d.priority || 'medium', item_number: d.item_number || '' });
              }
            }
            // Also flat requests directly under list
            const flatReqs = treeData.filter(t => t.parent_id === listId && t.type === 'request');
            for (const req of flatReqs) {
              const d = req.data || {};
              items.push({ section: '', title: d.title || req.summary || '', priority: d.priority || 'medium', item_number: d.item_number || '' });
            }
          }
          await fetchAPI('/api/templates', {
            method: 'POST',
            body: JSON.stringify({ name, items })
          });
        } catch(e) { console.error('Failed to save template:', e); }
      }

      async function openImportModal() {
        document.getElementById('importModal').style.display='flex';
        document.getElementById('importFile').value='';
        document.getElementById('importListName').value='';
        document.getElementById('importError').classList.add('hidden');
        // Populate visibility org options
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/orgs');
          const orgs = await res.json();
          const sel = document.getElementById('importVisibility');
          sel.innerHTML = '<option value="">Everyone (General List)</option>';
          if (orgs && orgs.length > 0) {
            for (const o of orgs) {
              const d = parseData(o.data_text);
              const orgName = d.org_name || d.name || 'Unknown';
              const orgId = d.org_id || o.entry_id || '';
              sel.innerHTML += `<option value="${escHtml(orgId)}">${escHtml(orgName)} only</option>`;
            }
          }
        } catch(e) {}
      }
      function closeImportModal() { document.getElementById('importModal').style.display='none'; }

      async function submitImport() {
        const file = document.getElementById('importFile').files[0];
        const errEl = document.getElementById('importError');
        const btn = document.getElementById('importBtn');
        if (!file) { errEl.textContent = 'Please select a file'; errEl.classList.remove('hidden'); return; }
        btn.disabled = true; btn.textContent = 'Importing...'; errEl.classList.add('hidden');
        const fd = new FormData();
        fd.append('file', file);
        fd.append('mode', document.getElementById('importMode').value);
        fd.append('list_name', document.getElementById('importListName').value);
        fd.append('visibility_org_id', document.getElementById('importVisibility').value);
        try {
          const res = await fetch('/api/projects/' + projectID + '/requests/import', { method: 'POST', headers: { 'Authorization': 'Bearer ' + token }, body: fd });
          const data = await res.json();
          if (!res.ok) throw new Error(data.error || 'Import failed');
          closeImportModal();
          await loadRequestTree();
          // Offer to save as template
          if (data && (data.total_items > 0 || data.list_id)) {
            const listName = document.getElementById('importListName')?.value?.trim() || data.list_name || '';
            const tmplName = prompt('Save this as a reusable template for future deals?\nEnter a name or click Cancel to skip:', listName);
            if (tmplName && tmplName.trim()) {
              await offerSaveTemplate(data.list_id, tmplName.trim(), data.items_for_template);
            }
          }
        } catch(e) { errEl.textContent = e.message; errEl.classList.remove('hidden'); }
        finally { btn.disabled = false; btn.textContent = 'Import'; }
      }

      // ---- Visibility edit ----
      async function editVisibility(entryId) {
        const item = treeData.find(t => t.entry_id === entryId);
        if (!item) return;
        const d = item.data || {};
        const currentVis = d.visibility_org_id || '';

        // Fetch orgs for the selector
        let orgs = [];
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/orgs');
          orgs = await res.json() || [];
        } catch(e) {}

        let opts = '<option value="">Everyone (General List)</option>';
        for (const o of orgs) {
          const od = parseData(o.data_text);
          const orgName = od.org_name || od.name || 'Unknown';
          const orgId = od.org_id || o.entry_id || '';
          opts += `<option value="${escHtml(orgId)}" ${orgId === currentVis ? 'selected' : ''}>${escHtml(orgName)} only</option>`;
        }

        const row = document.querySelector(`tr[data-id="${entryId}"]`);
        if (!row) return;
        const td = row.querySelector('td:nth-child(2)');
        if (!td) return;
        td.dataset.origHtml = td.innerHTML;
        td.innerHTML += `<div style="margin-top:4px;display:flex;align-items:center;gap:4px">
          <select id="vis-sel-${entryId}" style="padding:4px 8px;background:#0a1628;border:1px solid rgba(255,255,255,.12);border-radius:6px;color:white;font-size:12px">${opts}</select>
          <button onclick="saveVisibility('${entryId}')" style="padding:2px 8px;background:#c9a84c;color:#0a1628;border:none;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer">Save</button>
          <button onclick="cancelVisibility('${entryId}')" style="padding:2px 8px;background:rgba(255,255,255,.08);color:white;border:none;border-radius:4px;font-size:11px;cursor:pointer">Cancel</button>
        </div>`;
      }

      function cancelVisibility(entryId) {
        const row = document.querySelector(`tr[data-id="${entryId}"]`);
        if (!row) return;
        const td = row.querySelector('td:nth-child(2)');
        if (td && td.dataset.origHtml) td.innerHTML = td.dataset.origHtml;
      }

      async function saveVisibility(entryId) {
        const sel = document.getElementById('vis-sel-' + entryId);
        if (!sel) return;
        const val = sel.value || null;
        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + entryId + '/visibility', {
            method: 'PATCH',
            body: JSON.stringify({ visibility_org_id: val })
          });
          loadRequestTree();
        } catch(e) {
          console.error('Visibility update failed:', e);
        }
      }

      // ---- Init ----
      const _params = new URLSearchParams(window.location.search);
      let _wizardMode = _params.get('wizard') === '1';

      if (_wizardMode) {
        // New project wizard — don't load project (it doesn't exist yet)
        // Open the Add Party modal immediately in wizard mode
        setTimeout(() => {
          openAddOrgModal();
          document.getElementById('orgRole').value = 'seller';
          document.getElementById('addOrgTitle').textContent = 'New Project';
          document.getElementById('addOrgHint').textContent = "Enter the email or domain of the company this project is for.";
          document.getElementById('addOrgSubmitBtn').textContent = 'Next: Request Lists';
        }, 100);
      } else {
        loadProject();
        if (_params.get('tab') === 'orgs') {
          const orgsTab = document.querySelector('[onclick*="switchTab(\'orgs\'"]');
          if (orgsTab) switchTab('orgs', orgsTab);
          if (_params.get('addparty') === '1') {
            setTimeout(() => openAddOrgModal(), 300);
          }
        } else {
          loadRequestTree();
        }
      }
    </script>
  {{end}}


id: 6a5d7140-509f-43b6-86ee-e68ebaa467c5
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/portal/templates/app/request.html
version: initial
content:
  {{define "header-left"}}
      <div class="flex items-center gap-3">
        <a href="/app/projects" class="text-2xl font-bold text-white tracking-tight"><span class="text-[#c9a84c]">Deal</span>space</a>
        <span class="text-white/20">/</span>
        <a id="backToProject" href="/app/projects" class="text-sm text-[#b0bec5] hover:text-white transition">Project</a>
        <span class="text-white/20">/</span>
        <span id="reqRef" class="text-sm text-white font-medium">—</span>
      </div>
  {{end}}

  {{define "content"}}
    <div class="max-w-4xl mx-auto px-6 py-8 space-y-6">

      <!-- REQUEST CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <!-- Section header with meta -->
        <div class="px-6 pt-5 pb-4 border-b" style="border-color:var(--ds-bd)">
          <div class="flex items-start justify-between gap-4">
            <div class="flex flex-wrap items-center gap-2">
              <span id="reqItemBadge" class="hidden px-2.5 py-1 rounded text-xs font-semibold tracking-wide" style="background:var(--ds-ac);color:var(--ds-act)"></span>
              <span id="reqStatus" class="px-2.5 py-1 rounded-full text-xs font-medium capitalize"></span>
              <span id="reqPriority" class="hidden px-2.5 py-1 rounded-full text-xs font-medium"></span>
              <span id="reqDue" class="hidden text-xs font-medium" style="color:var(--ds-tx3)"></span>
            </div>
            <button id="editReqBtn" onclick="startEditRequest()" class="shrink-0 p-1.5 rounded hover:bg-white/[0.08] transition" style="color:var(--ds-tx3)" title="Edit request">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
            </button>
          </div>
        </div>
        <!-- Request body -->
        <div class="px-6 py-5">
          <p id="reqTitle" class="text-base leading-relaxed font-medium" style="color:var(--ds-tx)">Loading...</p>
          <p id="reqDesc" class="text-sm leading-relaxed mt-3" style="color:var(--ds-tx2)"></p>
          <!-- Edit mode -->
          <div id="reqEditMode" class="hidden mt-5 space-y-3 p-4 rounded-lg" style="background:var(--ds-bg);border:1px solid var(--ds-bd)">
            <div><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Request text</label>
              <textarea id="editReqTitle" rows="4" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea></div>
            <div class="flex gap-3">
              <div class="flex-1"><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Priority</label>
                <select id="editReqPriority" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)">
                  <option value="critical">Critical</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option>
                </select></div>
              <div class="flex-1"><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Status</label>
                <select id="editReqStatus" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)">
                  <option value="open">Open</option><option value="in_process">In Process</option><option value="partial">Partial</option><option value="complete">Complete</option>
                </select></div>
            </div>
            <div><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Description (optional)</label>
              <textarea id="editReqDesc" rows="2" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea></div>
            <div class="flex gap-2 mt-1">
              <button onclick="saveEditRequestDetail()" class="px-4 py-2 rounded text-sm font-semibold transition" style="background:var(--ds-ac);color:var(--ds-act)">Save</button>
              <button onclick="cancelEditRequestDetail()" class="px-4 py-2 rounded text-sm transition" style="background:var(--ds-hv);color:var(--ds-tx)">Cancel</button>
            </div>
          </div>
        </div>
      </div>

      <!-- RESPONSE CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div class="px-6 pt-4 pb-3 border-b flex items-center justify-between" style="border-color:var(--ds-bd)">
          <span class="text-xs font-semibold uppercase tracking-wider" style="color:var(--ds-tx3)">Files &amp; Response</span>
          <div id="answeredBanner" class="hidden px-3 py-1 rounded-full text-xs font-semibold bg-green-500/15 text-green-300">&#10003; Answered</div>
        </div>
        <div class="px-6 py-4">
          <div id="answers" class="space-y-2 mb-4"></div>
          <!-- empty state shown by JS if no answers -->
          <div id="answersEmpty" class="hidden py-6 text-center text-sm" style="color:var(--ds-tx3)">No files submitted yet.</div>
          <div id="uploadArea" class="mt-2 border border-dashed rounded-lg px-5 py-6 text-center cursor-pointer transition" style="border-color:var(--ds-bd)"
            onclick="document.getElementById('fileInput').click()"
            ondragover="event.preventDefault();this.style.borderColor='var(--ds-ac)'"
            ondragleave="this.style.borderColor='var(--ds-bd)'"
            ondrop="event.preventDefault();this.style.borderColor='var(--ds-bd)';uploadFiles(event.dataTransfer.files)">
            <svg class="w-6 h-6 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:var(--ds-tx3)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            <p class="text-sm font-medium" style="color:var(--ds-tx2)">Drop files or click to upload</p>
            <p class="text-xs mt-0.5" style="color:var(--ds-tx3)">PDF, DOCX, XLSX, images accepted</p>
            <input id="fileInput" type="file" multiple class="hidden" onchange="uploadFiles(this.files)">
          </div>
          <div id="uploadStatus" class="mt-3 text-sm" style="color:var(--ds-tx2)"></div>
          <button id="markAnsweredBtn" onclick="markAnswered()" class="hidden mt-4 px-5 py-2.5 rounded text-sm font-semibold bg-green-600 hover:bg-green-700 text-white transition">
            &#10003; Mark as Answered
          </button>
        </div>
      </div>

      <!-- DISCUSSION CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div id="channelTabs" class="flex items-center overflow-x-auto border-b" style="border-color:var(--ds-bd)">
          <div class="px-5 py-3 text-xs" style="color:var(--ds-tx3)">Loading channels...</div>
        </div>
        <div id="channelComments" class="px-6 py-4 space-y-4 min-h-[80px] max-h-[400px] overflow-y-auto">
          <p class="text-sm" style="color:var(--ds-tx3)">Select a channel above.</p>
        </div>
        <div id="commentComposer" class="border-t px-5 py-4" style="border-color:var(--ds-bd)">
          <div id="composeReadOnly" class="hidden py-1 text-xs text-center" style="color:var(--ds-tx3)">Read only in this channel.</div>
          <div id="composeForm" class="flex gap-3 items-end">
            <textarea id="commentText" rows="2" placeholder="Post an announcement..."
              class="flex-1 px-3 py-2.5 rounded-lg text-sm resize-none focus:outline-none focus:ring-1"
              style="background:var(--ds-bg);border:1px solid var(--ds-bd);color:var(--ds-tx);--tw-ring-color:var(--ds-ac)"></textarea>
            <button onclick="postComment(null)" class="px-4 py-2.5 rounded-lg text-sm font-semibold transition shrink-0" style="background:var(--ds-ac);color:var(--ds-act)">Post</button>
          </div>
        </div>
      </div>

    </div>
  {{end}}

  {{define "scripts"}}
  <script>
      const reqID = location.pathname.split('/').pop();
      function isBuyerRole() {
        const r = localStorage.getItem('ds_test_role') || '';
        return r === 'buyer' || r === 'seller' || r === 'advisor';
      }

      const statusColors = { open: 'bg-yellow-500/20 text-yellow-300', answered: 'bg-green-500/20 text-green-300', closed: 'bg-gray-500/20 text-gray-300', 'under-review': 'bg-blue-500/20 text-blue-300' };
      const priorityColors = { high: 'bg-red-500/20 text-red-300', medium: 'bg-yellow-500/20 text-yellow-300', low: 'bg-blue-500/20 text-blue-300' };

      let currentRequest = null;
      let currentData = null;
      let currentAnswers = [];

      async function applyRoleRestrictions() {
        try {
          const res = await fetchAPI('/api/auth/me');
          const me = res.ok ? await res.json() : {};
          // Use server role first, fall back to localStorage (survives service restarts)
          const role = me.test_role || localStorage.getItem('ds_test_role') || '';
          const isReadOnly = role === 'buyer' || role === 'seller' || role === 'advisor';
          if (isReadOnly) {
            const ua = document.getElementById('uploadArea');
            if (ua) ua.style.display = 'none';
            const mb = document.getElementById('markAnsweredBtn');
            if (mb) mb.style.display = 'none';
            const eb = document.getElementById('editReqBtn');
            if (eb) eb.style.display = 'none';
            const cc = document.getElementById('commentComposer');
            if (cc) cc.style.display = 'none';
          }
        } catch(e) {}
      }

      async function loadAll() {
        try {
          const res = await fetchAPI('/api/requests/' + reqID);
          if (!res.ok) { document.getElementById('reqTitle').textContent = 'Not found'; return; }
          const json = await res.json();
          currentRequest = json.request;
          currentData = parseData(currentRequest.data_text);
          const children = json.children || [];

          renderRequest(currentRequest, currentData);
          currentAnswers = children.filter(c => c.type === 'answer' || c.type === 'document');
          renderAnswers(currentAnswers);
          allComments = children.filter(c => c.type === 'comment');
          await initChannels();
        } catch(e) {
          document.getElementById('reqTitle').textContent = 'Error loading request';
        }
      }

      function renderRequest(req, d) {
        const title = d.title || req.summary || 'Untitled';
        document.title = title + ' \u2014 Dealspace';
        document.getElementById('reqRef').textContent = d.item_number || title;
        document.getElementById('reqTitle').textContent = title;
        // Don't repeat description if it's the same as the title
        const desc = d.description || '';
        document.getElementById('reqDesc').textContent = desc === title ? '' : desc;

        // Apply role-based UI restrictions
        applyRoleRestrictions();

        if (req.project_id) {
          document.getElementById('backToProject').href = '/app/projects/' + req.project_id;
          // Fetch project name for breadcrumb
          fetchAPI('/api/projects/' + req.project_id).then(r=>r.json()).then(p=>{
            const pname = (p.data_text ? (()=>{try{return JSON.parse(p.data_text)}catch{return{}}})() : {}).name || 'Project';
            document.getElementById('backToProject').textContent = pname;
          }).catch(()=>{});
        }

        const badge = document.getElementById('reqItemBadge');
        const badgeParts = [d.section, d.item_number].filter(Boolean);
        if (badgeParts.length) { badge.textContent = badgeParts.join(' \u00b7 '); badge.classList.remove('hidden'); }

        const prioEl = document.getElementById('reqPriority');
        if (d.priority) {
          const pc = priorityColors[d.priority] || 'bg-gray-500/20 text-gray-300';
          prioEl.className = 'px-2.5 py-1 rounded-full text-xs font-medium capitalize ' + pc;
          prioEl.textContent = d.priority + ' priority';
          prioEl.classList.remove('hidden');
        }

        if (d.due_date) {
          const dueEl = document.getElementById('reqDue');
          dueEl.textContent = '\ud83d\udcc5 Due: ' + d.due_date;
          dueEl.classList.remove('hidden');
        }

        const status = d.status || 'open';
        const sc = statusColors[status] || 'bg-gray-500/20 text-gray-300';
        const statusEl = document.getElementById('reqStatus');
        statusEl.className = 'px-2.5 py-1 rounded-full text-xs font-medium capitalize ' + sc;
        statusEl.textContent = status;

        if (status === 'answered') {
          document.getElementById('answeredBanner').classList.remove('hidden');
          document.getElementById('markAnsweredBtn').classList.add('hidden');
        } else {
          document.getElementById('answeredBanner').classList.add('hidden');
          document.getElementById('markAnsweredBtn').classList.remove('hidden');
        }
      }

      // ---- Edit request detail ----
      function startEditRequest() {
        if (!currentData) return;
        document.getElementById('editReqTitle').value = currentData.title || '';
        document.getElementById('editReqDesc').value = currentData.description || '';
        document.getElementById('editReqPriority').value = currentData.priority || 'medium';
        document.getElementById('editReqStatus').value = currentData.status || 'open';
        document.getElementById('reqTitle').classList.add('hidden');
        document.getElementById('reqDesc').classList.add('hidden');
        document.getElementById('editReqBtn').classList.add('hidden');
        document.getElementById('reqMetaBar').classList.add('hidden');
        document.getElementById('reqEditMode').classList.remove('hidden');
      }

      function cancelEditRequestDetail() {
        document.getElementById('reqTitle').classList.remove('hidden');
        document.getElementById('reqDesc').classList.remove('hidden');
        document.getElementById('editReqBtn').classList.remove('hidden');
        document.getElementById('reqMetaBar').classList.remove('hidden');
        document.getElementById('reqEditMode').classList.add('hidden');
      }

      async function saveEditRequestDetail() {
        if (!currentRequest || !currentData) return;
        const projectID = currentRequest.project_id;
        const updatedData = {
          ...currentData,
          title: document.getElementById('editReqTitle').value.trim(),
          description: document.getElementById('editReqDesc').value.trim(),
          priority: document.getElementById('editReqPriority').value,
          status: document.getElementById('editReqStatus').value
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + reqID, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(updatedData), version: currentRequest.version })
          });
          if (res.ok) {
            cancelEditRequestDetail();
            loadAll();
          }
        } catch(e) {
          console.error('Save failed:', e);
        }
      }

      // ---- Answers / Files ----
      function renderAnswers(docs) {
        const el = document.getElementById('answers');
        const emptyEl = document.getElementById('answersEmpty');
        if (!docs || docs.length === 0) {
          el.innerHTML = '';
          if (emptyEl) emptyEl.classList.remove('hidden');
          return;
        }
        if (emptyEl) emptyEl.classList.add('hidden');
        const projectID = currentRequest.project_id;
        el.innerHTML = docs.map(a => {
          const d = parseData(a.data_text);
          const name = d.filename || d.name || a.summary || 'Document';
          const icon = name.endsWith('.pdf') ? '\ud83d\udcc4' : name.match(/\.(jpg|jpeg|png|gif)$/i) ? '\ud83d\uddbc\ufe0f' : name.match(/\.(xlsx?|csv)$/i) ? '\ud83d\udcca' : '\ud83d\udcce';
          const objectID = d.object_id || '';
          const downloadUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '?filename=' + encodeURIComponent(name) : '#';
          const previewUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '/preview?filename=' + encodeURIComponent(name) : '';
          const isVideo = /\.(mp4|mov|avi|mkv|webm)$/i.test(name);
          return `<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-[#0a1628] border border-white/[0.05]">
            <span class="text-xl">${icon}</span>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-1">
                <span class="text-white text-sm font-medium truncate" id="fname-${a.entry_id}">${escHtml(name)}</span>
                <button onclick="startRenameFile('${a.entry_id}')" class="shrink-0 p-0.5 rounded hover:bg-white/[0.08] text-[#b0bec5] hover:text-white transition" title="Rename">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                </button>
              </div>
              <div class="text-[#8899a6] text-xs">${a.created_at ? new Date(a.created_at * 1000).toLocaleString() : ''}</div>
            </div>
            <div class="flex items-center gap-2 shrink-0">
              ${objectID && previewUrl ? `<a href="${previewUrl}" target="_blank" class="px-2 py-1 rounded text-xs font-medium bg-white/[0.06] text-[#b0bec5] hover:text-white hover:bg-white/[0.1] transition">${isVideo ? 'Play' : (isBuyerRole() ? 'View' : 'Preview')}</a>` : ''}
              ${objectID && !isBuyerRole() ? `<a href="${downloadUrl}" class="text-sm hover:underline" style="color:var(--ds-ac)">Download</a>` : ''}
            </div>
          </div>`;
        }).join('');
      }

      // ---- Rename file ----
      function startRenameFile(answerId) {
        const span = document.getElementById('fname-' + answerId);
        if (!span) return;
        const currentName = span.textContent;
        const container = span.parentElement;
        container.innerHTML = `<input type="text" value="" id="rename-input-${answerId}"
          style="flex:1;padding:2px 6px;background:#0a1628;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:white;font-size:13px;outline:none"
          onkeydown="handleRenameKey(event,'${answerId}')" onblur="saveRenameFile('${answerId}')">`;
        const input = document.getElementById('rename-input-' + answerId);
        if (input) { input.value = currentName; input.focus(); input.select(); }
      }

      function handleRenameKey(e, answerId) {
        if (e.key === 'Enter') { e.preventDefault(); e.target.blur(); }
        if (e.key === 'Escape') { e.target.dataset.cancelled = 'true'; e.target.blur(); }
      }

      async function saveRenameFile(answerId) {
        const input = document.getElementById('rename-input-' + answerId);
        if (!input || input.dataset.cancelled === 'true') { loadAll(); return; }
        const newName = input.value.trim();
        if (!newName) { loadAll(); return; }

        const answer = currentAnswers.find(a => a.entry_id === answerId);
        if (!answer) { loadAll(); return; }

        const projectID = currentRequest.project_id;
        const d = parseData(answer.data_text);
        d.filename = newName;
        d.name = newName;

        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + answerId, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(d), version: answer.version || 0 })
          });
        } catch(e) {
          console.error('Rename failed:', e);
        }
        loadAll();
      }

      // renderComments replaced by channel system below

      async function uploadFiles(files) {
        if (!currentRequest) return;
        const projectID = currentRequest.project_id;
        const status = document.getElementById('uploadStatus');
        for (const file of files) {
          status.textContent = 'Uploading ' + file.name + '...';
          const fd = new FormData();
          fd.append('file', file);
          try {
            const uploadRes = await fetchAPI('/api/projects/' + projectID + '/objects', { method: 'POST', body: fd });
            if (!uploadRes.ok) { status.textContent = 'Upload failed for ' + file.name; continue; }
            const uploadData = await uploadRes.json();

            const entryBody = {
              project_id: projectID,
              parent_id: reqID,
              type: 'document',
              data: JSON.stringify({ filename: file.name, name: file.name, content_type: file.type, object_id: uploadData.object_id })
            };
            const entryRes = await fetchAPI('/api/projects/' + projectID + '/entries', { method: 'POST', body: JSON.stringify(entryBody) });
            if (entryRes.ok) { status.textContent = file.name + ' uploaded.'; }
            else { status.textContent = 'Failed to save ' + file.name; }
          } catch(e) { status.textContent = 'Error: ' + e.message; }
        }
        setTimeout(() => status.textContent = '', 3000);
        loadAll();
      }

      // ---- Channel-based comment system ----
      let activeChannel = 'announcements';
      let allComments = [];
      let dealOrgs = [];
      let replyingToId = null;

      async function initChannels() {
        if (!currentRequest) return;
        try {
          const res = await fetchAPI('/api/projects/' + currentRequest.project_id + '/orgs');
          dealOrgs = await res.json() || [];
        } catch(e) { dealOrgs = []; }
        renderChannelTabs();
        switchChannel('announcements');
      }

      function renderChannelTabs() {
        const container = document.getElementById('channelTabs');
        const tabs = [
          { key: 'announcements', label: '📢 Announcements' },
          ...dealOrgs.map(o => {
            const d = parseData(o.data_text);
            return { key: 'org:' + o.entry_id, label: '🔒 ' + escHtml(d.org_name || d.name || 'Org') };
          })
        ];
        container.innerHTML = tabs.map(t =>
          `<button onclick="switchChannel(${JSON.stringify(t.key)})"
            class="px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition
              ${activeChannel === t.key ? 'border-[#c9a84c] text-white' : 'border-transparent text-[#b0bec5] hover:text-white'}">
            ${t.label}
          </button>`
        ).join('');
      }

      function switchChannel(key) {
        activeChannel = key;
        cancelReply();
        renderChannelTabs();
        renderChannelComments();
        const ta = document.getElementById('commentText');
        ta.placeholder = key === 'announcements' ? 'Post an announcement...' : 'Message this channel...';
      }

      function renderChannelComments() {
        const el = document.getElementById('channelComments');
        const ch = allComments.filter(c => (parseData(c.data_text).channel || 'announcements') === activeChannel);
        const top = ch.filter(c => !parseData(c.data_text).parent_comment_id);
        const nested = ch.filter(c => !!parseData(c.data_text).parent_comment_id);
        if (top.length === 0) {
          el.innerHTML = '<p class="text-[#8899a6] text-sm">No messages yet.</p>';
          return;
        }
        el.innerHTML = top.map(c => {
          const d = parseData(c.data_text);
          const replies = nested.filter(r => parseData(r.data_text).parent_comment_id === c.entry_id);
          return renderOneComment(c, d, false) + replies.map(r => renderOneComment(r, parseData(r.data_text), true)).join('');
        }).join('');
        el.scrollTop = el.scrollHeight;
      }

      function renderOneComment(c, d, isReply) {
        const av = (d.author || '?')[0].toUpperCase();
        const ts = c.created_at ? new Date(c.created_at * 1000).toLocaleString('en-US', {month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}) : '';
        const replyBtn = isReply ? '' : `<button onclick="startReply('${c.entry_id}')" class="text-xs text-[#8899a6] hover:text-[#b0bec5] ml-2 transition">Reply</button>`;
        const indent = isReply ? 'ml-10 pl-4 border-l-2 border-[#c9a84c]/30' : '';
        return `<div class="flex gap-3 ${indent}" data-comment-id="${c.entry_id}">
          <div class="w-7 h-7 rounded-full bg-[#c9a84c]/20 flex items-center justify-center text-[#c9a84c] text-xs font-semibold shrink-0 mt-0.5">${av}</div>
          <div class="flex-1 min-w-0">
            <div class="flex items-baseline gap-2 mb-1">
              <span class="text-white text-sm font-medium">${escHtml(d.author || 'Unknown')}</span>
              <span class="text-[#8899a6] text-xs">${ts}</span>
              ${replyBtn}
            </div>
            <p class="text-[#b0bec5] text-sm leading-relaxed">${escHtml(d.text || '')}</p>
          </div>
        </div>`;
      }

      function startReply(commentId) {
        cancelReply();
        replyingToId = commentId;
        const el = document.querySelector(`[data-comment-id="${commentId}"]`);
        if (!el) return;
        const form = document.createElement('div');
        form.id = 'replyForm';
        form.className = 'ml-10 pl-4 border-l-2 border-[#c9a84c]/30 mt-2';
        form.innerHTML = `<div class="flex gap-2 items-end">
          <textarea id="replyText" rows="2" placeholder="Reply..." class="flex-1 px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white placeholder-[#8899a6] focus:outline-none focus:border-[#c9a84c] text-sm resize-none"></textarea>
          <div class="flex flex-col gap-1">
            <button onclick="postComment('${commentId}')" class="px-3 py-1.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-xs transition">Reply</button>
            <button onclick="cancelReply()" class="px-3 py-1.5 bg-white/[0.05] hover:bg-white/[0.08] text-[#b0bec5] rounded-lg text-xs transition">Cancel</button>
          </div>
        </div>`;
        el.insertAdjacentElement('afterend', form);
        document.getElementById('replyText').focus();
      }

      function cancelReply() {
        replyingToId = null;
        const f = document.getElementById('replyForm');
        if (f) f.remove();
      }

      async function postComment(parentCommentId) {
        if (!currentRequest) return;
        const text = parentCommentId
          ? (document.getElementById('replyText')?.value || '').trim()
          : (document.getElementById('commentText')?.value || '').trim();
        if (!text) return;
        const projectID = currentRequest.project_id;
        const body = {
          project_id: projectID,
          parent_id: reqID,
          type: 'comment',
          data: JSON.stringify({ text, author: user.name || user.email, channel: activeChannel, parent_comment_id: parentCommentId || null })
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries', { method: 'POST', body: JSON.stringify(body) });
          if (res.ok) {
            if (parentCommentId) cancelReply(); else document.getElementById('commentText').value = '';
            await loadAll();
          }
        } catch(e) {}
      }

      async function markAnswered() {
        if (!currentRequest || !currentData) return;
        const projectID = currentRequest.project_id;
        const updatedData = { ...currentData, status: 'answered' };
        const body = {
          data: JSON.stringify(updatedData),
          version: currentRequest.version
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + reqID, { method: 'PUT', body: JSON.stringify(body) });
          if (res.ok) loadAll();
        } catch(e) {}
      }

      // Drag and drop
      const ua = document.getElementById('uploadArea');
      ua.addEventListener('dragover', e => { e.preventDefault(); ua.classList.add('border-[#c9a84c]/60'); });
      ua.addEventListener('dragleave', () => ua.classList.remove('border-[#c9a84c]/60'));
      ua.addEventListener('drop', e => { e.preventDefault(); ua.classList.remove('border-[#c9a84c]/60'); uploadFiles(e.dataTransfer.files); });

      loadAll();
  </script>
  {{end}}


id: 81d26ce2-c68d-4a9b-b22d-e9e9b6022bb8
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/portal/templates/app/request.html
version: v2
content:
  {{define "header-left"}}
      <div class="flex items-center gap-3">
        <a href="/app/projects" class="text-2xl font-bold text-white tracking-tight"><span class="text-[#c9a84c]">Deal</span>space</a>
        <span class="text-white/20">/</span>
        <a id="backToProject" href="/app/projects" class="text-sm text-[#b0bec5] hover:text-white transition">Project</a>
        <span class="text-white/20">/</span>
        <span id="reqRef" class="text-sm text-white font-medium">—</span>
      </div>
  {{end}}

  {{define "content"}}
    <div class="max-w-4xl mx-auto px-6 py-8 space-y-6">

      <!-- REQUEST CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <!-- Section header with meta -->
        <div class="px-6 pt-5 pb-4 border-b" style="border-color:var(--ds-bd)">
          <div class="flex items-start justify-between gap-4">
            <div class="flex flex-wrap items-center gap-2">
              <span id="reqItemBadge" class="hidden px-2.5 py-1 rounded text-xs font-semibold tracking-wide" style="background:var(--ds-ac);color:var(--ds-act)"></span>
              <span id="reqStatus" class="px-2.5 py-1 rounded-full text-xs font-medium capitalize"></span>
              <span id="reqPriority" class="hidden px-2.5 py-1 rounded-full text-xs font-medium"></span>
              <span id="reqDue" class="hidden text-xs font-medium" style="color:var(--ds-tx3)"></span>
            </div>
            <button id="editReqBtn" onclick="startEditRequest()" class="shrink-0 p-1.5 rounded hover:bg-white/[0.08] transition" style="color:var(--ds-tx3)" title="Edit request">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
            </button>
          </div>
        </div>
        <!-- Request body -->
        <div class="px-6 py-5">
          <p id="reqTitle" class="text-base leading-relaxed font-medium" style="color:var(--ds-tx)">Loading...</p>
          <p id="reqDesc" class="text-sm leading-relaxed mt-3" style="color:var(--ds-tx2)"></p>
          <!-- Edit mode -->
          <div id="reqEditMode" class="hidden mt-5 space-y-3 p-4 rounded-lg" style="background:var(--ds-bg);border:1px solid var(--ds-bd)">
            <div><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Request text</label>
              <textarea id="editReqTitle" rows="4" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea></div>
            <div class="flex gap-3">
              <div class="flex-1"><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Priority</label>
                <select id="editReqPriority" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)">
                  <option value="critical">Critical</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option>
                </select></div>
              <div class="flex-1"><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Status</label>
                <select id="editReqStatus" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)">
                  <option value="open">Open</option><option value="in_process">In Process</option><option value="partial">Partial</option><option value="complete">Complete</option>
                </select></div>
            </div>
            <div><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Description (optional)</label>
              <textarea id="editReqDesc" rows="2" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea></div>
            <div class="flex gap-2 mt-1">
              <button onclick="saveEditRequestDetail()" class="px-4 py-2 rounded text-sm font-semibold transition" style="background:var(--ds-ac);color:var(--ds-act)">Save</button>
              <button onclick="cancelEditRequestDetail()" class="px-4 py-2 rounded text-sm transition" style="background:var(--ds-hv);color:var(--ds-tx)">Cancel</button>
            </div>
          </div>
        </div>
      </div>

      <!-- RESPONSE CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div class="px-6 pt-4 pb-3 border-b flex items-center justify-between" style="border-color:var(--ds-bd)">
          <span class="text-xs font-semibold uppercase tracking-wider" style="color:var(--ds-tx3)">Files &amp; Response</span>
          <div id="answeredBanner" class="hidden px-3 py-1 rounded-full text-xs font-semibold bg-green-500/15 text-green-300">&#10003; Answered</div>
        </div>
        <div class="px-6 py-4">
          <div id="answers" class="space-y-2 mb-4"></div>
          <!-- empty state shown by JS if no answers -->
          <div id="answersEmpty" class="hidden py-6 text-center text-sm" style="color:var(--ds-tx3)">No files submitted yet.</div>
          <div id="uploadArea" class="mt-2 border border-dashed rounded-lg px-5 py-6 text-center cursor-pointer transition" style="border-color:var(--ds-bd)"
            onclick="document.getElementById('fileInput').click()"
            ondragover="event.preventDefault();this.style.borderColor='var(--ds-ac)'"
            ondragleave="this.style.borderColor='var(--ds-bd)'"
            ondrop="event.preventDefault();this.style.borderColor='var(--ds-bd)';uploadFiles(event.dataTransfer.files)">
            <svg class="w-6 h-6 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:var(--ds-tx3)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            <p class="text-sm font-medium" style="color:var(--ds-tx2)">Drop files or click to upload</p>
            <p class="text-xs mt-0.5" style="color:var(--ds-tx3)">PDF, DOCX, XLSX, images accepted</p>
            <input id="fileInput" type="file" multiple class="hidden" onchange="uploadFiles(this.files)">
          </div>
          <div id="uploadStatus" class="mt-3 text-sm" style="color:var(--ds-tx2)"></div>
          <button id="markAnsweredBtn" onclick="markAnswered()" class="hidden mt-4 px-5 py-2.5 rounded text-sm font-semibold bg-green-600 hover:bg-green-700 text-white transition">
            &#10003; Mark as Answered
          </button>
        </div>
      </div>

      <!-- DISCUSSION CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div id="channelTabs" class="flex items-center overflow-x-auto border-b" style="border-color:var(--ds-bd)">
          <div class="px-5 py-3 text-xs" style="color:var(--ds-tx3)">Loading channels...</div>
        </div>
        <div id="channelComments" class="px-6 py-4 space-y-4 min-h-[80px] max-h-[400px] overflow-y-auto">
          <p class="text-sm" style="color:var(--ds-tx3)">Select a channel above.</p>
        </div>
        <div id="commentComposer" class="border-t px-5 py-4" style="border-color:var(--ds-bd)">
          <div id="composeReadOnly" class="hidden py-1 text-xs text-center" style="color:var(--ds-tx3)">Read only in this channel.</div>
          <div id="composeForm" class="flex gap-3 items-end">
            <textarea id="commentText" rows="2" placeholder="Post an announcement..."
              class="flex-1 px-3 py-2.5 rounded-lg text-sm resize-none focus:outline-none focus:ring-1"
              style="background:var(--ds-bg);border:1px solid var(--ds-bd);color:var(--ds-tx);--tw-ring-color:var(--ds-ac)"></textarea>
            <button onclick="postComment(null)" class="px-4 py-2.5 rounded-lg text-sm font-semibold transition shrink-0" style="background:var(--ds-ac);color:var(--ds-act)">Post</button>
          </div>
        </div>
      </div>

    </div>
  {{end}}

  {{define "scripts"}}
  <script>
      const reqID = location.pathname.split('/').pop();
      function isBuyerRole() {
        const r = localStorage.getItem('ds_test_role') || '';
        return r === 'buyer' || r === 'seller' || r === 'advisor';
      }

      const statusColors = { 
        open: 'bg-gray-500/20 text-gray-300', 
        assigned: 'bg-blue-500/20 text-blue-300',
        answered: 'bg-purple-500/20 text-purple-300', 
        review: 'bg-yellow-500/20 text-yellow-300',
        published: 'bg-green-500/20 text-green-300'
      };
      const priorityColors = { high: 'bg-red-500/20 text-red-300', medium: 'bg-yellow-500/20 text-yellow-300', low: 'bg-blue-500/20 text-blue-300' };

      let currentRequest = null;
      let currentData = null;
      let currentAnswers = [];

      async function applyRoleRestrictions() {
        try {
          const res = await fetchAPI('/api/auth/me');
          const me = res.ok ? await res.json() : {};
          // Use server role first, fall back to localStorage (survives service restarts)
          const role = me.test_role || localStorage.getItem('ds_test_role') || '';
          const isReadOnly = role === 'buyer' || role === 'seller' || role === 'advisor';
          if (isReadOnly) {
            const ua = document.getElementById('uploadArea');
            if (ua) ua.style.display = 'none';
            const mb = document.getElementById('markAnsweredBtn');
            if (mb) mb.style.display = 'none';
            const eb = document.getElementById('editReqBtn');
            if (eb) eb.style.display = 'none';
            const cc = document.getElementById('commentComposer');
            if (cc) cc.style.display = 'none';
          }
        } catch(e) {}
      }

      async function loadAll() {
        try {
          const res = await fetchAPI('/api/requests/' + reqID);
          if (!res.ok) { document.getElementById('reqTitle').textContent = 'Not found'; return; }
          const json = await res.json();
          currentRequest = json.request;
          currentData = parseData(currentRequest.data_text);
          const children = json.children || [];

          renderRequest(currentRequest, currentData);
          currentAnswers = children.filter(c => c.type === 'answer' || c.type === 'document');
          renderAnswers(currentAnswers);
          allComments = children.filter(c => c.type === 'comment');
          await initChannels();
        } catch(e) {
          document.getElementById('reqTitle').textContent = 'Error loading request';
        }
      }

      function renderRequest(req, d) {
        const title = d.title || req.summary || 'Untitled';
        document.title = title + ' \u2014 Dealspace';
        document.getElementById('reqRef').textContent = d.item_number || title;
        document.getElementById('reqTitle').textContent = title;
        // Don't repeat description if it's the same as the title
        const desc = d.description || '';
        document.getElementById('reqDesc').textContent = desc === title ? '' : desc;

        // Apply role-based UI restrictions
        applyRoleRestrictions();

        if (req.project_id) {
          document.getElementById('backToProject').href = '/app/projects/' + req.project_id;
          // Fetch project name for breadcrumb
          fetchAPI('/api/projects/' + req.project_id).then(r=>r.json()).then(p=>{
            const pname = (p.data_text ? (()=>{try{return JSON.parse(p.data_text)}catch{return{}}})() : {}).name || 'Project';
            document.getElementById('backToProject').textContent = pname;
          }).catch(()=>{});
        }

        const badge = document.getElementById('reqItemBadge');
        const badgeParts = [d.section, d.item_number].filter(Boolean);
        if (badgeParts.length) { badge.textContent = badgeParts.join(' \u00b7 '); badge.classList.remove('hidden'); }

        const prioEl = document.getElementById('reqPriority');
        if (d.priority) {
          const pc = priorityColors[d.priority] || 'bg-gray-500/20 text-gray-300';
          prioEl.className = 'px-2.5 py-1 rounded-full text-xs font-medium capitalize ' + pc;
          prioEl.textContent = d.priority + ' priority';
          prioEl.classList.remove('hidden');
        }

        if (d.due_date) {
          const dueEl = document.getElementById('reqDue');
          dueEl.textContent = '\ud83d\udcc5 Due: ' + d.due_date;
          dueEl.classList.remove('hidden');
        }

        const status = d.status || 'open';
        const sc = statusColors[status] || 'bg-gray-500/20 text-gray-300';
        const statusEl = document.getElementById('reqStatus');
        statusEl.className = 'px-2.5 py-1 rounded-full text-xs font-medium capitalize ' + sc;
        statusEl.textContent = status;

        if (status === 'answered') {
          document.getElementById('answeredBanner').classList.remove('hidden');
          document.getElementById('markAnsweredBtn').classList.add('hidden');
        } else {
          document.getElementById('answeredBanner').classList.add('hidden');
          document.getElementById('markAnsweredBtn').classList.remove('hidden');
        }
      }

      // ---- Edit request detail ----
      function startEditRequest() {
        if (!currentData) return;
        document.getElementById('editReqTitle').value = currentData.title || '';
        document.getElementById('editReqDesc').value = currentData.description || '';
        document.getElementById('editReqPriority').value = currentData.priority || 'medium';
        document.getElementById('editReqStatus').value = currentData.status || 'open';
        document.getElementById('reqTitle').classList.add('hidden');
        document.getElementById('reqDesc').classList.add('hidden');
        document.getElementById('editReqBtn').classList.add('hidden');
        document.getElementById('reqMetaBar').classList.add('hidden');
        document.getElementById('reqEditMode').classList.remove('hidden');
      }

      function cancelEditRequestDetail() {
        document.getElementById('reqTitle').classList.remove('hidden');
        document.getElementById('reqDesc').classList.remove('hidden');
        document.getElementById('editReqBtn').classList.remove('hidden');
        document.getElementById('reqMetaBar').classList.remove('hidden');
        document.getElementById('reqEditMode').classList.add('hidden');
      }

      async function saveEditRequestDetail() {
        if (!currentRequest || !currentData) return;
        const projectID = currentRequest.project_id;
        const updatedData = {
          ...currentData,
          title: document.getElementById('editReqTitle').value.trim(),
          description: document.getElementById('editReqDesc').value.trim(),
          priority: document.getElementById('editReqPriority').value,
          status: document.getElementById('editReqStatus').value
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + reqID, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(updatedData), version: currentRequest.version })
          });
          if (res.ok) {
            cancelEditRequestDetail();
            loadAll();
          }
        } catch(e) {
          console.error('Save failed:', e);
        }
      }

      // ---- Answers / Files ----
      function renderAnswers(docs) {
        const el = document.getElementById('answers');
        const emptyEl = document.getElementById('answersEmpty');
        if (!docs || docs.length === 0) {
          el.innerHTML = '';
          if (emptyEl) emptyEl.classList.remove('hidden');
          return;
        }
        if (emptyEl) emptyEl.classList.add('hidden');
        const projectID = currentRequest.project_id;
        el.innerHTML = docs.map(a => {
          const d = parseData(a.data_text);
          const name = d.filename || d.name || a.summary || 'Document';
          const icon = name.endsWith('.pdf') ? '\ud83d\udcc4' : name.match(/\.(jpg|jpeg|png|gif)$/i) ? '\ud83d\uddbc\ufe0f' : name.match(/\.(xlsx?|csv)$/i) ? '\ud83d\udcca' : '\ud83d\udcce';
          const objectID = d.object_id || '';
          const downloadUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '?filename=' + encodeURIComponent(name) : '#';
          const previewUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '/preview?filename=' + encodeURIComponent(name) : '';
          const isVideo = /\.(mp4|mov|avi|mkv|webm)$/i.test(name);
          return `<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-[#0a1628] border border-white/[0.05]">
            <span class="text-xl">${icon}</span>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-1">
                <span class="text-white text-sm font-medium truncate" id="fname-${a.entry_id}">${escHtml(name)}</span>
                <button onclick="startRenameFile('${a.entry_id}')" class="shrink-0 p-0.5 rounded hover:bg-white/[0.08] text-[#b0bec5] hover:text-white transition" title="Rename">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                </button>
              </div>
              <div class="text-[#8899a6] text-xs">${a.created_at ? new Date(a.created_at * 1000).toLocaleString() : ''}</div>
            </div>
            <div class="flex items-center gap-2 shrink-0">
              ${objectID && previewUrl ? `<a href="${previewUrl}" target="_blank" class="px-2 py-1 rounded text-xs font-medium bg-white/[0.06] text-[#b0bec5] hover:text-white hover:bg-white/[0.1] transition">${isVideo ? 'Play' : (isBuyerRole() ? 'View' : 'Preview')}</a>` : ''}
              ${objectID && !isBuyerRole() ? `<a href="${downloadUrl}" class="text-sm hover:underline" style="color:var(--ds-ac)">Download</a>` : ''}
            </div>
          </div>`;
        }).join('');
      }

      // ---- Rename file ----
      function startRenameFile(answerId) {
        const span = document.getElementById('fname-' + answerId);
        if (!span) return;
        const currentName = span.textContent;
        const container = span.parentElement;
        container.innerHTML = `<input type="text" value="" id="rename-input-${answerId}"
          style="flex:1;padding:2px 6px;background:#0a1628;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:white;font-size:13px;outline:none"
          onkeydown="handleRenameKey(event,'${answerId}')" onblur="saveRenameFile('${answerId}')">`;
        const input = document.getElementById('rename-input-' + answerId);
        if (input) { input.value = currentName; input.focus(); input.select(); }
      }

      function handleRenameKey(e, answerId) {
        if (e.key === 'Enter') { e.preventDefault(); e.target.blur(); }
        if (e.key === 'Escape') { e.target.dataset.cancelled = 'true'; e.target.blur(); }
      }

      async function saveRenameFile(answerId) {
        const input = document.getElementById('rename-input-' + answerId);
        if (!input || input.dataset.cancelled === 'true') { loadAll(); return; }
        const newName = input.value.trim();
        if (!newName) { loadAll(); return; }

        const answer = currentAnswers.find(a => a.entry_id === answerId);
        if (!answer) { loadAll(); return; }

        const projectID = currentRequest.project_id;
        const d = parseData(answer.data_text);
        d.filename = newName;
        d.name = newName;

        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + answerId, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(d), version: answer.version || 0 })
          });
        } catch(e) {
          console.error('Rename failed:', e);
        }
        loadAll();
      }

      // renderComments replaced by channel system below

      async function uploadFiles(files) {
        if (!currentRequest) return;
        const projectID = currentRequest.project_id;
        const status = document.getElementById('uploadStatus');
        for (const file of files) {
          status.textContent = 'Uploading ' + file.name + '...';
          const fd = new FormData();
          fd.append('file', file);
          try {
            const uploadRes = await fetchAPI('/api/projects/' + projectID + '/objects', { method: 'POST', body: fd });
            if (!uploadRes.ok) { status.textContent = 'Upload failed for ' + file.name; continue; }
            const uploadData = await uploadRes.json();

            const entryBody = {
              project_id: projectID,
              parent_id: reqID,
              type: 'document',
              data: JSON.stringify({ filename: file.name, name: file.name, content_type: file.type, object_id: uploadData.object_id })
            };
            const entryRes = await fetchAPI('/api/projects/' + projectID + '/entries', { method: 'POST', body: JSON.stringify(entryBody) });
            if (entryRes.ok) { status.textContent = file.name + ' uploaded.'; }
            else { status.textContent = 'Failed to save ' + file.name; }
          } catch(e) { status.textContent = 'Error: ' + e.message; }
        }
        setTimeout(() => status.textContent = '', 3000);
        loadAll();
      }

      // ---- Channel-based comment system ----
      let activeChannel = 'announcements';
      let allComments = [];
      let dealOrgs = [];
      let replyingToId = null;

      async function initChannels() {
        if (!currentRequest) return;
        try {
          const res = await fetchAPI('/api/projects/' + currentRequest.project_id + '/orgs');
          dealOrgs = await res.json() || [];
        } catch(e) { dealOrgs = []; }
        renderChannelTabs();
        switchChannel('announcements');
      }

      function renderChannelTabs() {
        const container = document.getElementById('channelTabs');
        const tabs = [
          { key: 'announcements', label: '📢 Announcements' },
          ...dealOrgs.map(o => {
            const d = parseData(o.data_text);
            return { key: 'org:' + o.entry_id, label: '🔒 ' + escHtml(d.org_name || d.name || 'Org') };
          })
        ];
        container.innerHTML = tabs.map(t =>
          `<button onclick="switchChannel(${JSON.stringify(t.key)})"
            class="px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition
              ${activeChannel === t.key ? 'border-[#c9a84c] text-white' : 'border-transparent text-[#b0bec5] hover:text-white'}">
            ${t.label}
          </button>`
        ).join('');
      }

      function switchChannel(key) {
        activeChannel = key;
        cancelReply();
        renderChannelTabs();
        renderChannelComments();
        const ta = document.getElementById('commentText');
        ta.placeholder = key === 'announcements' ? 'Post an announcement...' : 'Message this channel...';
      }

      function renderChannelComments() {
        const el = document.getElementById('channelComments');
        const ch = allComments.filter(c => (parseData(c.data_text).channel || 'announcements') === activeChannel);
        const top = ch.filter(c => !parseData(c.data_text).parent_comment_id);
        const nested = ch.filter(c => !!parseData(c.data_text).parent_comment_id);
        if (top.length === 0) {
          el.innerHTML = '<p class="text-[#8899a6] text-sm">No messages yet.</p>';
          return;
        }
        el.innerHTML = top.map(c => {
          const d = parseData(c.data_text);
          const replies = nested.filter(r => parseData(r.data_text).parent_comment_id === c.entry_id);
          return renderOneComment(c, d, false) + replies.map(r => renderOneComment(r, parseData(r.data_text), true)).join('');
        }).join('');
        el.scrollTop = el.scrollHeight;
      }

      function renderOneComment(c, d, isReply) {
        const av = (d.author || '?')[0].toUpperCase();
        const ts = c.created_at ? new Date(c.created_at * 1000).toLocaleString('en-US', {month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}) : '';
        const replyBtn = isReply ? '' : `<button onclick="startReply('${c.entry_id}')" class="text-xs text-[#8899a6] hover:text-[#b0bec5] ml-2 transition">Reply</button>`;
        const indent = isReply ? 'ml-10 pl-4 border-l-2 border-[#c9a84c]/30' : '';
        return `<div class="flex gap-3 ${indent}" data-comment-id="${c.entry_id}">
          <div class="w-7 h-7 rounded-full bg-[#c9a84c]/20 flex items-center justify-center text-[#c9a84c] text-xs font-semibold shrink-0 mt-0.5">${av}</div>
          <div class="flex-1 min-w-0">
            <div class="flex items-baseline gap-2 mb-1">
              <span class="text-white text-sm font-medium">${escHtml(d.author || 'Unknown')}</span>
              <span class="text-[#8899a6] text-xs">${ts}</span>
              ${replyBtn}
            </div>
            <p class="text-[#b0bec5] text-sm leading-relaxed">${escHtml(d.text || '')}</p>
          </div>
        </div>`;
      }

      function startReply(commentId) {
        cancelReply();
        replyingToId = commentId;
        const el = document.querySelector(`[data-comment-id="${commentId}"]`);
        if (!el) return;
        const form = document.createElement('div');
        form.id = 'replyForm';
        form.className = 'ml-10 pl-4 border-l-2 border-[#c9a84c]/30 mt-2';
        form.innerHTML = `<div class="flex gap-2 items-end">
          <textarea id="replyText" rows="2" placeholder="Reply..." class="flex-1 px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white placeholder-[#8899a6] focus:outline-none focus:border-[#c9a84c] text-sm resize-none"></textarea>
          <div class="flex flex-col gap-1">
            <button onclick="postComment('${commentId}')" class="px-3 py-1.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-xs transition">Reply</button>
            <button onclick="cancelReply()" class="px-3 py-1.5 bg-white/[0.05] hover:bg-white/[0.08] text-[#b0bec5] rounded-lg text-xs transition">Cancel</button>
          </div>
        </div>`;
        el.insertAdjacentElement('afterend', form);
        document.getElementById('replyText').focus();
      }

      function cancelReply() {
        replyingToId = null;
        const f = document.getElementById('replyForm');
        if (f) f.remove();
      }

      async function postComment(parentCommentId) {
        if (!currentRequest) return;
        const text = parentCommentId
          ? (document.getElementById('replyText')?.value || '').trim()
          : (document.getElementById('commentText')?.value || '').trim();
        if (!text) return;
        const projectID = currentRequest.project_id;
        const body = {
          project_id: projectID,
          parent_id: reqID,
          type: 'comment',
          data: JSON.stringify({ text, author: user.name || user.email, channel: activeChannel, parent_comment_id: parentCommentId || null })
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries', { method: 'POST', body: JSON.stringify(body) });
          if (res.ok) {
            if (parentCommentId) cancelReply(); else document.getElementById('commentText').value = '';
            await loadAll();
          }
        } catch(e) {}
      }

      async function markAnswered() {
        if (!currentRequest || !currentData) return;
        const projectID = currentRequest.project_id;
        const updatedData = { ...currentData, status: 'answered' };
        const body = {
          data: JSON.stringify(updatedData),
          version: currentRequest.version
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + reqID, { method: 'PUT', body: JSON.stringify(body) });
          if (res.ok) loadAll();
        } catch(e) {}
      }

      // Drag and drop
      const ua = document.getElementById('uploadArea');
      ua.addEventListener('dragover', e => { e.preventDefault(); ua.classList.add('border-[#c9a84c]/60'); });
      ua.addEventListener('dragleave', () => ua.classList.remove('border-[#c9a84c]/60'));
      ua.addEventListener('drop', e => { e.preventDefault(); ua.classList.remove('border-[#c9a84c]/60'); uploadFiles(e.dataTransfer.files); });

      loadAll();
  </script>
  {{end}}


id: 8256db46-52e2-4740-b87b-5a3e2aedc7ed
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/portal/templates/app/request.html
version: v4
content:
  {{define "header-left"}}
      <div class="flex items-center gap-3">
        <a href="/app/projects" class="text-2xl font-bold text-white tracking-tight"><span class="text-[#c9a84c]">Deal</span>space</a>
        <span class="text-white/20">/</span>
        <a id="backToProject" href="/app/projects" class="text-sm text-[#b0bec5] hover:text-white transition">Project</a>
        <span class="text-white/20">/</span>
        <span id="reqRef" class="text-sm text-white font-medium">—</span>
      </div>
  {{end}}

  {{define "content"}}
    <div class="max-w-4xl mx-auto px-6 py-8 space-y-6">

      <!-- REQUEST CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <!-- Section header with meta -->
        <div class="px-6 pt-5 pb-4 border-b" style="border-color:var(--ds-bd)">
          <div class="flex items-start justify-between gap-4">
            <div class="flex flex-wrap items-center gap-2">
              <span id="reqItemBadge" class="hidden px-2.5 py-1 rounded text-xs font-semibold tracking-wide" style="background:var(--ds-ac);color:var(--ds-act)"></span>
              <span id="reqStatus" class="px-2.5 py-1 rounded-full text-xs font-medium capitalize"></span>
              <span id="reqPriority" class="hidden px-2.5 py-1 rounded-full text-xs font-medium"></span>
              <span id="reqDue" class="hidden text-xs font-medium" style="color:var(--ds-tx3)"></span>
            </div>
            <button id="editReqBtn" onclick="startEditRequest()" class="shrink-0 p-1.5 rounded hover:bg-white/[0.08] transition" style="color:var(--ds-tx3)" title="Edit request">
              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
            </button>
          </div>
        </div>
        <!-- Request body -->
        <div class="px-6 py-5">
          <p id="reqTitle" class="text-base leading-relaxed font-medium" style="color:var(--ds-tx)">Loading...</p>
          <p id="reqDesc" class="text-sm leading-relaxed mt-3" style="color:var(--ds-tx2)"></p>
          <!-- Edit mode -->
          <div id="reqEditMode" class="hidden mt-5 space-y-3 p-4 rounded-lg" style="background:var(--ds-bg);border:1px solid var(--ds-bd)">
            <div><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Request text</label>
              <textarea id="editReqTitle" rows="4" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea></div>
            <div class="flex gap-3">
              <div class="flex-1"><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Priority</label>
                <select id="editReqPriority" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)">
                  <option value="critical">Critical</option><option value="high">High</option><option value="medium">Medium</option><option value="low">Low</option>
                </select></div>
              <div class="flex-1"><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Status</label>
                <select id="editReqStatus" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)">
                  <option value="open">Open</option><option value="assigned">Assigned</option><option value="answered">Answered</option><option value="review">Review</option><option value="published">Published</option>
                </select></div>
            </div>
            <div><label class="block text-xs font-medium mb-1.5" style="color:var(--ds-tx3)">Description (optional)</label>
              <textarea id="editReqDesc" rows="2" class="w-full px-3 py-2 rounded text-sm focus:outline-none" style="background:var(--ds-sf);border:1px solid var(--ds-bd);color:var(--ds-tx)"></textarea></div>
            <div class="flex gap-2 mt-1">
              <button onclick="saveEditRequestDetail()" class="px-4 py-2 rounded text-sm font-semibold transition" style="background:var(--ds-ac);color:var(--ds-act)">Save</button>
              <button onclick="cancelEditRequestDetail()" class="px-4 py-2 rounded text-sm transition" style="background:var(--ds-hv);color:var(--ds-tx)">Cancel</button>
            </div>
          </div>
        </div>
      </div>

      <!-- RESPONSE CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div class="px-6 pt-4 pb-3 border-b flex items-center justify-between" style="border-color:var(--ds-bd)">
          <span class="text-xs font-semibold uppercase tracking-wider" style="color:var(--ds-tx3)">Files &amp; Response</span>
          <div id="answeredBanner" class="hidden px-3 py-1 rounded-full text-xs font-semibold bg-green-500/15 text-green-300">&#10003; Answered</div>
        </div>
        <div class="px-6 py-4">
          <div id="answers" class="space-y-2 mb-4"></div>
          <!-- empty state shown by JS if no answers -->
          <div id="answersEmpty" class="hidden py-6 text-center text-sm" style="color:var(--ds-tx3)">No files submitted yet.</div>
          <div id="uploadArea" class="mt-2 border border-dashed rounded-lg px-5 py-6 text-center cursor-pointer transition" style="border-color:var(--ds-bd)"
            onclick="document.getElementById('fileInput').click()"
            ondragover="event.preventDefault();this.style.borderColor='var(--ds-ac)'"
            ondragleave="this.style.borderColor='var(--ds-bd)'"
            ondrop="event.preventDefault();this.style.borderColor='var(--ds-bd)';uploadFiles(event.dataTransfer.files)">
            <svg class="w-6 h-6 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color:var(--ds-tx3)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            <p class="text-sm font-medium" style="color:var(--ds-tx2)">Drop files or click to upload</p>
            <p class="text-xs mt-0.5" style="color:var(--ds-tx3)">PDF, DOCX, XLSX, images accepted</p>
            <input id="fileInput" type="file" multiple class="hidden" onchange="uploadFiles(this.files)">
          </div>
          <div id="uploadStatus" class="mt-3 text-sm" style="color:var(--ds-tx2)"></div>
          <button id="markAnsweredBtn" onclick="markAnswered()" class="hidden mt-4 px-5 py-2.5 rounded text-sm font-semibold bg-green-600 hover:bg-green-700 text-white transition">
            &#10003; Mark as Answered
          </button>
        </div>
      </div>

      <!-- DISCUSSION CARD -->
      <div class="rounded-xl overflow-hidden" style="background:var(--ds-sf);border:1px solid var(--ds-bd)">
        <div id="channelTabs" class="flex items-center overflow-x-auto border-b" style="border-color:var(--ds-bd)">
          <div class="px-5 py-3 text-xs" style="color:var(--ds-tx3)">Loading channels...</div>
        </div>
        <div id="channelComments" class="px-6 py-4 space-y-4 min-h-[80px] max-h-[400px] overflow-y-auto">
          <p class="text-sm" style="color:var(--ds-tx3)">Select a channel above.</p>
        </div>
        <div id="commentComposer" class="border-t px-5 py-4" style="border-color:var(--ds-bd)">
          <div id="composeReadOnly" class="hidden py-1 text-xs text-center" style="color:var(--ds-tx3)">Read only in this channel.</div>
          <div id="composeForm" class="flex gap-3 items-end">
            <textarea id="commentText" rows="2" placeholder="Post an announcement..."
              class="flex-1 px-3 py-2.5 rounded-lg text-sm resize-none focus:outline-none focus:ring-1"
              style="background:var(--ds-bg);border:1px solid var(--ds-bd);color:var(--ds-tx);--tw-ring-color:var(--ds-ac)"></textarea>
            <button onclick="postComment(null)" class="px-4 py-2.5 rounded-lg text-sm font-semibold transition shrink-0" style="background:var(--ds-ac);color:var(--ds-act)">Post</button>
          </div>
        </div>
      </div>

    </div>
  {{end}}

  {{define "scripts"}}
  <script>
      const reqID = location.pathname.split('/').pop();
      function isBuyerRole() {
        const r = localStorage.getItem('ds_test_role') || '';
        return r === 'buyer' || r === 'seller' || r === 'advisor';
      }

      const statusColors = { 
        open: 'bg-gray-500/20 text-gray-300', 
        assigned: 'bg-blue-500/20 text-blue-300',
        answered: 'bg-purple-500/20 text-purple-300', 
        review: 'bg-yellow-500/20 text-yellow-300',
        published: 'bg-green-500/20 text-green-300'
      };
      const priorityColors = { high: 'bg-red-500/20 text-red-300', medium: 'bg-yellow-500/20 text-yellow-300', low: 'bg-blue-500/20 text-blue-300' };

      let currentRequest = null;
      let currentData = null;
      let currentAnswers = [];

      async function applyRoleRestrictions() {
        try {
          const res = await fetchAPI('/api/auth/me');
          const me = res.ok ? await res.json() : {};
          // Use server role first, fall back to localStorage (survives service restarts)
          const role = me.test_role || localStorage.getItem('ds_test_role') || '';
          const isReadOnly = role === 'buyer' || role === 'seller' || role === 'advisor';
          if (isReadOnly) {
            const ua = document.getElementById('uploadArea');
            if (ua) ua.style.display = 'none';
            const mb = document.getElementById('markAnsweredBtn');
            if (mb) mb.style.display = 'none';
            const eb = document.getElementById('editReqBtn');
            if (eb) eb.style.display = 'none';
            const cc = document.getElementById('commentComposer');
            if (cc) cc.style.display = 'none';
          }
        } catch(e) {}
      }

      async function loadAll() {
        try {
          const res = await fetchAPI('/api/requests/' + reqID);
          if (!res.ok) { document.getElementById('reqTitle').textContent = 'Not found'; return; }
          const json = await res.json();
          currentRequest = json.request;
          currentData = parseData(currentRequest.data_text);
          const children = json.children || [];

          renderRequest(currentRequest, currentData);
          currentAnswers = children.filter(c => c.type === 'answer' || c.type === 'document');
          renderAnswers(currentAnswers);
          allComments = children.filter(c => c.type === 'comment');
          await initChannels();
        } catch(e) {
          document.getElementById('reqTitle').textContent = 'Error loading request';
        }
      }

      function renderRequest(req, d) {
        const title = d.title || req.summary || 'Untitled';
        document.title = title + ' \u2014 Dealspace';
        document.getElementById('reqRef').textContent = d.item_number || title;
        document.getElementById('reqTitle').textContent = title;
        // Don't repeat description if it's the same as the title
        const desc = d.description || '';
        document.getElementById('reqDesc').textContent = desc === title ? '' : desc;

        // Apply role-based UI restrictions
        applyRoleRestrictions();

        if (req.project_id) {
          document.getElementById('backToProject').href = '/app/projects/' + req.project_id;
          // Fetch project name for breadcrumb
          fetchAPI('/api/projects/' + req.project_id).then(r=>r.json()).then(p=>{
            const pname = (p.data_text ? (()=>{try{return JSON.parse(p.data_text)}catch{return{}}})() : {}).name || 'Project';
            document.getElementById('backToProject').textContent = pname;
          }).catch(()=>{});
        }

        const badge = document.getElementById('reqItemBadge');
        const badgeParts = [d.section, d.item_number].filter(Boolean);
        if (badgeParts.length) { badge.textContent = badgeParts.join(' \u00b7 '); badge.classList.remove('hidden'); }

        const prioEl = document.getElementById('reqPriority');
        if (d.priority) {
          const pc = priorityColors[d.priority] || 'bg-gray-500/20 text-gray-300';
          prioEl.className = 'px-2.5 py-1 rounded-full text-xs font-medium capitalize ' + pc;
          prioEl.textContent = d.priority + ' priority';
          prioEl.classList.remove('hidden');
        }

        if (d.due_date) {
          const dueEl = document.getElementById('reqDue');
          dueEl.textContent = '\ud83d\udcc5 Due: ' + d.due_date;
          dueEl.classList.remove('hidden');
        }

        const status = d.status || 'open';
        const sc = statusColors[status] || 'bg-gray-500/20 text-gray-300';
        const statusEl = document.getElementById('reqStatus');
        statusEl.className = 'px-2.5 py-1 rounded-full text-xs font-medium capitalize ' + sc;
        statusEl.textContent = status;

        if (status === 'answered') {
          document.getElementById('answeredBanner').classList.remove('hidden');
          document.getElementById('markAnsweredBtn').classList.add('hidden');
        } else {
          document.getElementById('answeredBanner').classList.add('hidden');
          document.getElementById('markAnsweredBtn').classList.remove('hidden');
        }
      }

      // ---- Edit request detail ----
      function startEditRequest() {
        if (!currentData) return;
        document.getElementById('editReqTitle').value = currentData.title || '';
        document.getElementById('editReqDesc').value = currentData.description || '';
        document.getElementById('editReqPriority').value = currentData.priority || 'medium';
        document.getElementById('editReqStatus').value = currentData.status || 'open';
        document.getElementById('reqTitle').classList.add('hidden');
        document.getElementById('reqDesc').classList.add('hidden');
        document.getElementById('editReqBtn').classList.add('hidden');
        document.getElementById('reqMetaBar').classList.add('hidden');
        document.getElementById('reqEditMode').classList.remove('hidden');
      }

      function cancelEditRequestDetail() {
        document.getElementById('reqTitle').classList.remove('hidden');
        document.getElementById('reqDesc').classList.remove('hidden');
        document.getElementById('editReqBtn').classList.remove('hidden');
        document.getElementById('reqMetaBar').classList.remove('hidden');
        document.getElementById('reqEditMode').classList.add('hidden');
      }

      async function saveEditRequestDetail() {
        if (!currentRequest || !currentData) return;
        const projectID = currentRequest.project_id;
        const updatedData = {
          ...currentData,
          title: document.getElementById('editReqTitle').value.trim(),
          description: document.getElementById('editReqDesc').value.trim(),
          priority: document.getElementById('editReqPriority').value,
          status: document.getElementById('editReqStatus').value
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + reqID, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(updatedData), version: currentRequest.version })
          });
          if (res.ok) {
            cancelEditRequestDetail();
            loadAll();
          }
        } catch(e) {
          console.error('Save failed:', e);
        }
      }

      // ---- Answers / Files ----
      function renderAnswers(docs) {
        const el = document.getElementById('answers');
        const emptyEl = document.getElementById('answersEmpty');
        if (!docs || docs.length === 0) {
          el.innerHTML = '';
          if (emptyEl) emptyEl.classList.remove('hidden');
          return;
        }
        if (emptyEl) emptyEl.classList.add('hidden');
        const projectID = currentRequest.project_id;
        el.innerHTML = docs.map(a => {
          const d = parseData(a.data_text);
          const name = d.filename || d.name || a.summary || 'Document';
          const icon = name.endsWith('.pdf') ? '\ud83d\udcc4' : name.match(/\.(jpg|jpeg|png|gif)$/i) ? '\ud83d\uddbc\ufe0f' : name.match(/\.(xlsx?|csv)$/i) ? '\ud83d\udcca' : '\ud83d\udcce';
          const objectID = d.object_id || '';
          const downloadUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '?filename=' + encodeURIComponent(name) : '#';
          const previewUrl = objectID ? '/api/projects/' + projectID + '/objects/' + objectID + '/preview?filename=' + encodeURIComponent(name) : '';
          const isVideo = /\.(mp4|mov|avi|mkv|webm)$/i.test(name);
          return `<div class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-[#0a1628] border border-white/[0.05]">
            <span class="text-xl">${icon}</span>
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-1">
                <span class="text-white text-sm font-medium truncate" id="fname-${a.entry_id}">${escHtml(name)}</span>
                <button onclick="startRenameFile('${a.entry_id}')" class="shrink-0 p-0.5 rounded hover:bg-white/[0.08] text-[#b0bec5] hover:text-white transition" title="Rename">
                  <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/></svg>
                </button>
              </div>
              <div class="text-[#8899a6] text-xs">${a.created_at ? new Date(a.created_at * 1000).toLocaleString() : ''}</div>
            </div>
            <div class="flex items-center gap-2 shrink-0">
              ${objectID && previewUrl ? `<a href="${previewUrl}" target="_blank" class="px-2 py-1 rounded text-xs font-medium bg-white/[0.06] text-[#b0bec5] hover:text-white hover:bg-white/[0.1] transition">${isVideo ? 'Play' : (isBuyerRole() ? 'View' : 'Preview')}</a>` : ''}
              ${objectID && !isBuyerRole() ? `<a href="${downloadUrl}" class="text-sm hover:underline" style="color:var(--ds-ac)">Download</a>` : ''}
            </div>
          </div>`;
        }).join('');
      }

      // ---- Rename file ----
      function startRenameFile(answerId) {
        const span = document.getElementById('fname-' + answerId);
        if (!span) return;
        const currentName = span.textContent;
        const container = span.parentElement;
        container.innerHTML = `<input type="text" value="" id="rename-input-${answerId}"
          style="flex:1;padding:2px 6px;background:#0a1628;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:white;font-size:13px;outline:none"
          onkeydown="handleRenameKey(event,'${answerId}')" onblur="saveRenameFile('${answerId}')">`;
        const input = document.getElementById('rename-input-' + answerId);
        if (input) { input.value = currentName; input.focus(); input.select(); }
      }

      function handleRenameKey(e, answerId) {
        if (e.key === 'Enter') { e.preventDefault(); e.target.blur(); }
        if (e.key === 'Escape') { e.target.dataset.cancelled = 'true'; e.target.blur(); }
      }

      async function saveRenameFile(answerId) {
        const input = document.getElementById('rename-input-' + answerId);
        if (!input || input.dataset.cancelled === 'true') { loadAll(); return; }
        const newName = input.value.trim();
        if (!newName) { loadAll(); return; }

        const answer = currentAnswers.find(a => a.entry_id === answerId);
        if (!answer) { loadAll(); return; }

        const projectID = currentRequest.project_id;
        const d = parseData(answer.data_text);
        d.filename = newName;
        d.name = newName;

        try {
          await fetchAPI('/api/projects/' + projectID + '/entries/' + answerId, {
            method: 'PUT',
            body: JSON.stringify({ data: JSON.stringify(d), version: answer.version || 0 })
          });
        } catch(e) {
          console.error('Rename failed:', e);
        }
        loadAll();
      }

      // renderComments replaced by channel system below

      async function uploadFiles(files) {
        if (!currentRequest) return;
        const projectID = currentRequest.project_id;
        const status = document.getElementById('uploadStatus');
        for (const file of files) {
          status.textContent = 'Uploading ' + file.name + '...';
          const fd = new FormData();
          fd.append('file', file);
          try {
            const uploadRes = await fetchAPI('/api/projects/' + projectID + '/objects', { method: 'POST', body: fd });
            if (!uploadRes.ok) { status.textContent = 'Upload failed for ' + file.name; continue; }
            const uploadData = await uploadRes.json();

            const entryBody = {
              project_id: projectID,
              parent_id: reqID,
              type: 'document',
              data: JSON.stringify({ filename: file.name, name: file.name, content_type: file.type, object_id: uploadData.object_id })
            };
            const entryRes = await fetchAPI('/api/projects/' + projectID + '/entries', { method: 'POST', body: JSON.stringify(entryBody) });
            if (entryRes.ok) { status.textContent = file.name + ' uploaded.'; }
            else { status.textContent = 'Failed to save ' + file.name; }
          } catch(e) { status.textContent = 'Error: ' + e.message; }
        }
        setTimeout(() => status.textContent = '', 3000);
        loadAll();
      }

      // ---- Channel-based comment system ----
      let activeChannel = 'announcements';
      let allComments = [];
      let dealOrgs = [];
      let replyingToId = null;

      async function initChannels() {
        if (!currentRequest) return;
        try {
          const res = await fetchAPI('/api/projects/' + currentRequest.project_id + '/orgs');
          dealOrgs = await res.json() || [];
        } catch(e) { dealOrgs = []; }
        renderChannelTabs();
        switchChannel('announcements');
      }

      function renderChannelTabs() {
        const container = document.getElementById('channelTabs');
        const tabs = [
          { key: 'announcements', label: '📢 Announcements' },
          ...dealOrgs.map(o => {
            const d = parseData(o.data_text);
            return { key: 'org:' + o.entry_id, label: '🔒 ' + escHtml(d.org_name || d.name || 'Org') };
          })
        ];
        container.innerHTML = tabs.map(t =>
          `<button onclick="switchChannel(${JSON.stringify(t.key)})"
            class="px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 -mb-px transition
              ${activeChannel === t.key ? 'border-[#c9a84c] text-white' : 'border-transparent text-[#b0bec5] hover:text-white'}">
            ${t.label}
          </button>`
        ).join('');
      }

      function switchChannel(key) {
        activeChannel = key;
        cancelReply();
        renderChannelTabs();
        renderChannelComments();
        const ta = document.getElementById('commentText');
        ta.placeholder = key === 'announcements' ? 'Post an announcement...' : 'Message this channel...';
      }

      function renderChannelComments() {
        const el = document.getElementById('channelComments');
        const ch = allComments.filter(c => (parseData(c.data_text).channel || 'announcements') === activeChannel);
        const top = ch.filter(c => !parseData(c.data_text).parent_comment_id);
        const nested = ch.filter(c => !!parseData(c.data_text).parent_comment_id);
        if (top.length === 0) {
          el.innerHTML = '<p class="text-[#8899a6] text-sm">No messages yet.</p>';
          return;
        }
        el.innerHTML = top.map(c => {
          const d = parseData(c.data_text);
          const replies = nested.filter(r => parseData(r.data_text).parent_comment_id === c.entry_id);
          return renderOneComment(c, d, false) + replies.map(r => renderOneComment(r, parseData(r.data_text), true)).join('');
        }).join('');
        el.scrollTop = el.scrollHeight;
      }

      function renderOneComment(c, d, isReply) {
        const av = (d.author || '?')[0].toUpperCase();
        const ts = c.created_at ? new Date(c.created_at * 1000).toLocaleString('en-US', {month:'short',day:'numeric',hour:'numeric',minute:'2-digit'}) : '';
        const replyBtn = isReply ? '' : `<button onclick="startReply('${c.entry_id}')" class="text-xs text-[#8899a6] hover:text-[#b0bec5] ml-2 transition">Reply</button>`;
        const indent = isReply ? 'ml-10 pl-4 border-l-2 border-[#c9a84c]/30' : '';
        return `<div class="flex gap-3 ${indent}" data-comment-id="${c.entry_id}">
          <div class="w-7 h-7 rounded-full bg-[#c9a84c]/20 flex items-center justify-center text-[#c9a84c] text-xs font-semibold shrink-0 mt-0.5">${av}</div>
          <div class="flex-1 min-w-0">
            <div class="flex items-baseline gap-2 mb-1">
              <span class="text-white text-sm font-medium">${escHtml(d.author || 'Unknown')}</span>
              <span class="text-[#8899a6] text-xs">${ts}</span>
              ${replyBtn}
            </div>
            <p class="text-[#b0bec5] text-sm leading-relaxed">${escHtml(d.text || '')}</p>
          </div>
        </div>`;
      }

      function startReply(commentId) {
        cancelReply();
        replyingToId = commentId;
        const el = document.querySelector(`[data-comment-id="${commentId}"]`);
        if (!el) return;
        const form = document.createElement('div');
        form.id = 'replyForm';
        form.className = 'ml-10 pl-4 border-l-2 border-[#c9a84c]/30 mt-2';
        form.innerHTML = `<div class="flex gap-2 items-end">
          <textarea id="replyText" rows="2" placeholder="Reply..." class="flex-1 px-3 py-2 bg-[#0a1628] border border-white/[0.08] rounded-lg text-white placeholder-[#8899a6] focus:outline-none focus:border-[#c9a84c] text-sm resize-none"></textarea>
          <div class="flex flex-col gap-1">
            <button onclick="postComment('${commentId}')" class="px-3 py-1.5 bg-[#c9a84c] hover:bg-[#b8973f] text-[#0a1628] font-semibold rounded-lg text-xs transition">Reply</button>
            <button onclick="cancelReply()" class="px-3 py-1.5 bg-white/[0.05] hover:bg-white/[0.08] text-[#b0bec5] rounded-lg text-xs transition">Cancel</button>
          </div>
        </div>`;
        el.insertAdjacentElement('afterend', form);
        document.getElementById('replyText').focus();
      }

      function cancelReply() {
        replyingToId = null;
        const f = document.getElementById('replyForm');
        if (f) f.remove();
      }

      async function postComment(parentCommentId) {
        if (!currentRequest) return;
        const text = parentCommentId
          ? (document.getElementById('replyText')?.value || '').trim()
          : (document.getElementById('commentText')?.value || '').trim();
        if (!text) return;
        const projectID = currentRequest.project_id;
        const body = {
          project_id: projectID,
          parent_id: reqID,
          type: 'comment',
          data: JSON.stringify({ text, author: user.name || user.email, channel: activeChannel, parent_comment_id: parentCommentId || null })
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries', { method: 'POST', body: JSON.stringify(body) });
          if (res.ok) {
            if (parentCommentId) cancelReply(); else document.getElementById('commentText').value = '';
            await loadAll();
          }
        } catch(e) {}
      }

      async function markAnswered() {
        if (!currentRequest || !currentData) return;
        const projectID = currentRequest.project_id;
        const updatedData = { ...currentData, status: 'answered' };
        const body = {
          data: JSON.stringify(updatedData),
          version: currentRequest.version
        };
        try {
          const res = await fetchAPI('/api/projects/' + projectID + '/entries/' + reqID, { method: 'PUT', body: JSON.stringify(body) });
          if (res.ok) loadAll();
        } catch(e) {}
      }

      // Drag and drop
      const ua = document.getElementById('uploadArea');
      ua.addEventListener('dragover', e => { e.preventDefault(); ua.classList.add('border-[#c9a84c]/60'); });
      ua.addEventListener('dragleave', () => ua.classList.remove('border-[#c9a84c]/60'));
      ua.addEventListener('drop', e => { e.preventDefault(); ua.classList.remove('border-[#c9a84c]/60'); uploadFiles(e.dataTransfer.files); });

      loadAll();
  </script>
  {{end}}


id: f32b504b-9b14-4e79-b832-43be3da47eac
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/api/mcp.go
version: initial
content:
  package api

  import (
  	"context"
  	"encoding/json"
  	"fmt"
  	"strings"

  	"github.com/mark3labs/mcp-go/mcp"
  	"github.com/mark3labs/mcp-go/server"
  	"github.com/mish/dealspace/lib"
  )

  // NewMCPServer creates an MCP server with all Dealspace tools registered.
  func NewMCPServer(db *lib.DB, cfg *lib.Config) *server.MCPServer {
  	s := server.NewMCPServer(
  		"dealspace",
  		"1.0.0",
  		server.WithToolCapabilities(false),
  		server.WithRecovery(),
  	)

  	s.AddTool(listProjectsTool(), listProjectsHandler(db, cfg))
  	s.AddTool(getProjectTool(), getProjectHandler(db, cfg))
  	s.AddTool(listRequestsTool(), listRequestsHandler(db, cfg))
  	s.AddTool(getRequestTool(), getRequestHandler(db, cfg))
  	s.AddTool(searchRequestsTool(), searchRequestsHandler(db, cfg))
  	s.AddTool(updateRequestStatusTool(), updateRequestStatusHandler(db, cfg))
  	s.AddTool(addCommentTool(), addCommentHandler(db, cfg))
  	s.AddTool(listAnswersTool(), listAnswersHandler(db, cfg))
  	s.AddTool(linkAnswerTool(), linkAnswerHandler(db))
  	s.AddTool(listTasksTool(), listTasksHandler(db, cfg))

  	return s
  }

  // MCPContextFunc propagates user_id from OAuth middleware into MCP tool context.
  func MCPContextFunc(ctx context.Context, r interface{ Context() context.Context }) context.Context {
  	if uid := UserIDFromContext(r.Context()); uid != "" {
  		return context.WithValue(ctx, ctxUserID, uid)
  	}
  	return ctx
  }

  // --- Tool definitions ---

  func listProjectsTool() mcp.Tool {
  	return mcp.NewTool("list_projects",
  		mcp.WithDescription("List all projects the user has access to"),
  	)
  }

  func getProjectTool() mcp.Tool {
  	return mcp.NewTool("get_project",
  		mcp.WithDescription("Get project details including workstreams and summary"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func listRequestsTool() mcp.Tool {
  	return mcp.NewTool("list_requests",
  		mcp.WithDescription("List all requests in a project as a tree (request lists, sections, requests)"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func getRequestTool() mcp.Tool {
  	return mcp.NewTool("get_request",
  		mcp.WithDescription("Get request details including linked answers"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  	)
  }

  func searchRequestsTool() mcp.Tool {
  	return mcp.NewTool("search_requests",
  		mcp.WithDescription("Search requests by keyword in title, description, or comments"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  		mcp.WithString("query", mcp.Description("Search keyword"), mcp.Required()),
  	)
  }

  func updateRequestStatusTool() mcp.Tool {
  	return mcp.NewTool("update_request_status",
  		mcp.WithDescription("Update the status of a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("status", mcp.Description("New status: open, in_process, partial, or complete"), mcp.Required()),
  	)
  }

  func addCommentTool() mcp.Tool {
  	return mcp.NewTool("add_comment",
  		mcp.WithDescription("Add a buyer or seller comment to a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("comment", mcp.Description("The comment text"), mcp.Required()),
  		mcp.WithString("side", mcp.Description("Which side: buyer or seller"), mcp.Required()),
  	)
  }

  func listAnswersTool() mcp.Tool {
  	return mcp.NewTool("list_answers",
  		mcp.WithDescription("List answer documents in a project"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func linkAnswerTool() mcp.Tool {
  	return mcp.NewTool("link_answer",
  		mcp.WithDescription("Link an existing answer document to a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("answer_id", mcp.Description("The answer entry ID"), mcp.Required()),
  	)
  }

  func listTasksTool() mcp.Tool {
  	return mcp.NewTool("list_tasks",
  		mcp.WithDescription("List tasks assigned to the current user"),
  		mcp.WithString("project_id", mcp.Description("Optional project ID to filter tasks")),
  	)
  }

  // --- Tool handlers ---

  func listProjectsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projects, err := lib.ProjectsByUser(db, cfg, userID)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list projects: " + err.Error()), nil
  		}

  		var lines []string
  		for _, p := range projects {
  			var data map[string]any
  			if p.DataText != "" {
  				_ = json.Unmarshal([]byte(p.DataText), &data)
  			}
  			name, _ := data["name"].(string)
  			if name == "" {
  				name = p.EntryID
  			}
  			lines = append(lines, fmt.Sprintf("- %s (id: %s, stage: %s)", name, p.EntryID, p.Stage))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No projects found."), nil
  		}
  		return mcp.NewToolResultText("Projects:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func getProjectHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, projectID)
  		if err != nil {
  			return mcp.NewToolResultError("Project not found"), nil
  		}
  		if entry.Type != lib.TypeProject {
  			return mcp.NewToolResultError("Not a project"), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Project: %s\nID: %s\nStage: %s\nCreated: %d\nData: %s",
  			entry.SummaryText, entry.EntryID, entry.Stage, entry.CreatedAt, entry.DataText)), nil
  	}
  }

  func listRequestsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		// Verify access
  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list entries: " + err.Error()), nil
  		}

  		// Filter to request types and build tree text
  		var lines []string
  		for _, e := range entries {
  			if e.Type != lib.TypeRequestList && e.Type != lib.TypeSection && e.Type != lib.TypeRequest {
  				continue
  			}
  			indent := strings.Repeat("  ", e.Depth)
  			var data map[string]any
  			if e.DataText != "" {
  				_ = json.Unmarshal([]byte(e.DataText), &data)
  			}

  			switch e.Type {
  			case lib.TypeRequestList:
  				name, _ := data["name"].(string)
  				lines = append(lines, fmt.Sprintf("%s[Request List] %s (id: %s)", indent, name, e.EntryID))
  			case lib.TypeSection:
  				name, _ := data["name"].(string)
  				lines = append(lines, fmt.Sprintf("%s[Section] %s (id: %s)", indent, name, e.EntryID))
  			case lib.TypeRequest:
  				title, _ := data["title"].(string)
  				status, _ := data["status"].(string)
  				priority, _ := data["priority"].(string)
  				lines = append(lines, fmt.Sprintf("%s- %s [%s/%s] (id: %s)", indent, title, status, priority, e.EntryID))
  			}
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No requests found in this project."), nil
  		}
  		return mcp.NewToolResultText("Request tree:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func getRequestHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}

  		result := fmt.Sprintf("Request ID: %s\nProject: %s\nType: %s\nData: %s",
  			entry.EntryID, entry.ProjectID, entry.Type, entry.DataText)

  		// Get linked answers
  		links, err := lib.AnswerLinksByRequest(db, requestID)
  		if err == nil && len(links) > 0 {
  			result += "\n\nLinked Answers:"
  			for _, link := range links {
  				answerEntry, err := lib.EntryByID(db, cfg, link.AnswerID)
  				if err == nil {
  					result += fmt.Sprintf("\n  - %s (id: %s)", answerEntry.SummaryText, link.AnswerID)
  				}
  			}
  		}

  		return mcp.NewToolResultText(result), nil
  	}
  }

  func searchRequestsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}
  		query, err := req.RequireString("query")
  		if err != nil {
  			return mcp.NewToolResultError("query is required"), nil
  		}

  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID, Type: lib.TypeRequest}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to search: " + err.Error()), nil
  		}

  		queryLower := strings.ToLower(query)
  		var lines []string
  		for _, e := range entries {
  			if strings.Contains(strings.ToLower(e.DataText), queryLower) ||
  				strings.Contains(strings.ToLower(e.SummaryText), queryLower) {
  				var data map[string]any
  				if e.DataText != "" {
  					_ = json.Unmarshal([]byte(e.DataText), &data)
  				}
  				title, _ := data["title"].(string)
  				status, _ := data["status"].(string)
  				lines = append(lines, fmt.Sprintf("- %s [%s] (id: %s)", title, status, e.EntryID))
  			}
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No requests matching '" + query + "' found."), nil
  		}
  		return mcp.NewToolResultText(fmt.Sprintf("Found %d results:\n%s", len(lines), strings.Join(lines, "\n"))), nil
  	}
  }

  func updateRequestStatusHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		status, err := req.RequireString("status")
  		if err != nil {
  			return mcp.NewToolResultError("status is required"), nil
  		}

  		validStatuses := map[string]bool{"open": true, "in_process": true, "partial": true, "complete": true}
  		if !validStatuses[status] {
  			return mcp.NewToolResultError("Invalid status. Must be: open, in_process, partial, or complete"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}
  		if entry.Type != lib.TypeRequest {
  			return mcp.NewToolResultError("Entry is not a request"), nil
  		}

  		// Parse current data, update status
  		var data lib.RequestData
  		if entry.DataText != "" {
  			_ = json.Unmarshal([]byte(entry.DataText), &data)
  		}
  		data.Status = status

  		dataJSON, _ := json.Marshal(data)
  		entry.DataText = string(dataJSON)

  		if err := lib.EntryWrite(db, cfg, userID, entry); err != nil {
  			return mcp.NewToolResultError("Failed to update: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Updated request %s status to '%s'", requestID, status)), nil
  	}
  }

  func addCommentHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		comment, err := req.RequireString("comment")
  		if err != nil {
  			return mcp.NewToolResultError("comment is required"), nil
  		}
  		side, err := req.RequireString("side")
  		if err != nil {
  			return mcp.NewToolResultError("side is required"), nil
  		}

  		if side != "buyer" && side != "seller" {
  			return mcp.NewToolResultError("side must be 'buyer' or 'seller'"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}
  		if entry.Type != lib.TypeRequest {
  			return mcp.NewToolResultError("Entry is not a request"), nil
  		}

  		var data lib.RequestData
  		if entry.DataText != "" {
  			_ = json.Unmarshal([]byte(entry.DataText), &data)
  		}

  		if side == "buyer" {
  			data.BuyerComment = comment
  		} else {
  			data.SellerComment = comment
  		}

  		dataJSON, _ := json.Marshal(data)
  		entry.DataText = string(dataJSON)

  		if err := lib.EntryWrite(db, cfg, userID, entry); err != nil {
  			return mcp.NewToolResultError("Failed to update: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Added %s comment to request %s", side, requestID)), nil
  	}
  }

  func listAnswersHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID, Type: lib.TypeAnswer}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list answers: " + err.Error()), nil
  		}

  		var lines []string
  		for _, e := range entries {
  			lines = append(lines, fmt.Sprintf("- %s (id: %s)", e.SummaryText, e.EntryID))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No answer documents found."), nil
  		}
  		return mcp.NewToolResultText("Answers:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func linkAnswerHandler(db *lib.DB) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		answerID, err := req.RequireString("answer_id")
  		if err != nil {
  			return mcp.NewToolResultError("answer_id is required"), nil
  		}

  		if err := lib.AnswerLinkCreate(db, answerID, requestID, userID); err != nil {
  			return mcp.NewToolResultError("Failed to link answer: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Linked answer %s to request %s", answerID, requestID)), nil
  	}
  }

  func listTasksHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		tasks, err := lib.TasksByUser(db, cfg, userID)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list tasks: " + err.Error()), nil
  		}

  		projectID := req.GetString("project_id", "")

  		var lines []string
  		for _, t := range tasks {
  			if projectID != "" && t.ProjectID != projectID {
  				continue
  			}
  			lines = append(lines, fmt.Sprintf("- %s (id: %s, project: %s, stage: %s)",
  				t.SummaryText, t.EntryID, t.ProjectID, t.Stage))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No tasks assigned to you."), nil
  		}
  		return mcp.NewToolResultText("Your tasks:\n" + strings.Join(lines, "\n")), nil
  	}
  }


id: 5e3e65d2-a9f6-4a41-b35d-d04726ac711b
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/api/mcp.go
version: v2
content:
  package api

  import (
  	"context"
  	"encoding/json"
  	"fmt"
  	"strings"

  	"github.com/mark3labs/mcp-go/mcp"
  	"github.com/mark3labs/mcp-go/server"
  	"github.com/mish/dealspace/lib"
  )

  // NewMCPServer creates an MCP server with all Dealspace tools registered.
  func NewMCPServer(db *lib.DB, cfg *lib.Config) *server.MCPServer {
  	s := server.NewMCPServer(
  		"dealspace",
  		"1.0.0",
  		server.WithToolCapabilities(false),
  		server.WithRecovery(),
  	)

  	s.AddTool(listProjectsTool(), listProjectsHandler(db, cfg))
  	s.AddTool(getProjectTool(), getProjectHandler(db, cfg))
  	s.AddTool(listRequestsTool(), listRequestsHandler(db, cfg))
  	s.AddTool(getRequestTool(), getRequestHandler(db, cfg))
  	s.AddTool(searchRequestsTool(), searchRequestsHandler(db, cfg))
  	s.AddTool(updateRequestStatusTool(), updateRequestStatusHandler(db, cfg))
  	s.AddTool(addCommentTool(), addCommentHandler(db, cfg))
  	s.AddTool(listAnswersTool(), listAnswersHandler(db, cfg))
  	s.AddTool(linkAnswerTool(), linkAnswerHandler(db))
  	s.AddTool(listTasksTool(), listTasksHandler(db, cfg))

  	return s
  }

  // MCPContextFunc propagates user_id from OAuth middleware into MCP tool context.
  func MCPContextFunc(ctx context.Context, r interface{ Context() context.Context }) context.Context {
  	if uid := UserIDFromContext(r.Context()); uid != "" {
  		return context.WithValue(ctx, ctxUserID, uid)
  	}
  	return ctx
  }

  // --- Tool definitions ---

  func listProjectsTool() mcp.Tool {
  	return mcp.NewTool("list_projects",
  		mcp.WithDescription("List all projects the user has access to"),
  	)
  }

  func getProjectTool() mcp.Tool {
  	return mcp.NewTool("get_project",
  		mcp.WithDescription("Get project details including workstreams and summary"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func listRequestsTool() mcp.Tool {
  	return mcp.NewTool("list_requests",
  		mcp.WithDescription("List all requests in a project as a tree (request lists, sections, requests)"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func getRequestTool() mcp.Tool {
  	return mcp.NewTool("get_request",
  		mcp.WithDescription("Get request details including linked answers"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  	)
  }

  func searchRequestsTool() mcp.Tool {
  	return mcp.NewTool("search_requests",
  		mcp.WithDescription("Search requests by keyword in title, description, or comments"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  		mcp.WithString("query", mcp.Description("Search keyword"), mcp.Required()),
  	)
  }

  func updateRequestStatusTool() mcp.Tool {
  	return mcp.NewTool("update_request_status",
  		mcp.WithDescription("Update the status of a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("status", mcp.Description("New status: open, in_process, partial, or complete"), mcp.Required()),
  	)
  }

  func addCommentTool() mcp.Tool {
  	return mcp.NewTool("add_comment",
  		mcp.WithDescription("Add a buyer or seller comment to a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("comment", mcp.Description("The comment text"), mcp.Required()),
  		mcp.WithString("side", mcp.Description("Which side: buyer or seller"), mcp.Required()),
  	)
  }

  func listAnswersTool() mcp.Tool {
  	return mcp.NewTool("list_answers",
  		mcp.WithDescription("List answer documents in a project"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func linkAnswerTool() mcp.Tool {
  	return mcp.NewTool("link_answer",
  		mcp.WithDescription("Link an existing answer document to a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("answer_id", mcp.Description("The answer entry ID"), mcp.Required()),
  	)
  }

  func listTasksTool() mcp.Tool {
  	return mcp.NewTool("list_tasks",
  		mcp.WithDescription("List tasks assigned to the current user"),
  		mcp.WithString("project_id", mcp.Description("Optional project ID to filter tasks")),
  	)
  }

  // --- Tool handlers ---

  func listProjectsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projects, err := lib.ProjectsByUser(db, cfg, userID)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list projects: " + err.Error()), nil
  		}

  		var lines []string
  		for _, p := range projects {
  			var data map[string]any
  			if p.DataText != "" {
  				_ = json.Unmarshal([]byte(p.DataText), &data)
  			}
  			name, _ := data["name"].(string)
  			if name == "" {
  				name = p.EntryID
  			}
  			lines = append(lines, fmt.Sprintf("- %s (id: %s, stage: %s)", name, p.EntryID, p.Stage))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No projects found."), nil
  		}
  		return mcp.NewToolResultText("Projects:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func getProjectHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, projectID)
  		if err != nil {
  			return mcp.NewToolResultError("Project not found"), nil
  		}
  		if entry.Type != lib.TypeProject {
  			return mcp.NewToolResultError("Not a project"), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Project: %s\nID: %s\nStage: %s\nCreated: %d\nData: %s",
  			entry.SummaryText, entry.EntryID, entry.Stage, entry.CreatedAt, entry.DataText)), nil
  	}
  }

  func listRequestsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		// Verify access
  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list entries: " + err.Error()), nil
  		}

  		// Filter to request types and build tree text
  		var lines []string
  		for _, e := range entries {
  			if e.Type != lib.TypeRequestList && e.Type != lib.TypeSection && e.Type != lib.TypeRequest {
  				continue
  			}
  			indent := strings.Repeat("  ", e.Depth)
  			var data map[string]any
  			if e.DataText != "" {
  				_ = json.Unmarshal([]byte(e.DataText), &data)
  			}

  			switch e.Type {
  			case lib.TypeRequestList:
  				name, _ := data["name"].(string)
  				lines = append(lines, fmt.Sprintf("%s[Request List] %s (id: %s)", indent, name, e.EntryID))
  			case lib.TypeSection:
  				name, _ := data["name"].(string)
  				lines = append(lines, fmt.Sprintf("%s[Section] %s (id: %s)", indent, name, e.EntryID))
  			case lib.TypeRequest:
  				title, _ := data["title"].(string)
  				status, _ := data["status"].(string)
  				priority, _ := data["priority"].(string)
  				lines = append(lines, fmt.Sprintf("%s- %s [%s/%s] (id: %s)", indent, title, status, priority, e.EntryID))
  			}
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No requests found in this project."), nil
  		}
  		return mcp.NewToolResultText("Request tree:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func getRequestHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}

  		result := fmt.Sprintf("Request ID: %s\nProject: %s\nType: %s\nData: %s",
  			entry.EntryID, entry.ProjectID, entry.Type, entry.DataText)

  		// Get linked answers
  		links, err := lib.AnswerLinksByRequest(db, requestID)
  		if err == nil && len(links) > 0 {
  			result += "\n\nLinked Answers:"
  			for _, link := range links {
  				answerEntry, err := lib.EntryByID(db, cfg, link.AnswerID)
  				if err == nil {
  					result += fmt.Sprintf("\n  - %s (id: %s)", answerEntry.SummaryText, link.AnswerID)
  				}
  			}
  		}

  		return mcp.NewToolResultText(result), nil
  	}
  }

  func searchRequestsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}
  		query, err := req.RequireString("query")
  		if err != nil {
  			return mcp.NewToolResultError("query is required"), nil
  		}

  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID, Type: lib.TypeRequest}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to search: " + err.Error()), nil
  		}

  		queryLower := strings.ToLower(query)
  		var lines []string
  		for _, e := range entries {
  			if strings.Contains(strings.ToLower(e.DataText), queryLower) ||
  				strings.Contains(strings.ToLower(e.SummaryText), queryLower) {
  				var data map[string]any
  				if e.DataText != "" {
  					_ = json.Unmarshal([]byte(e.DataText), &data)
  				}
  				title, _ := data["title"].(string)
  				status, _ := data["status"].(string)
  				lines = append(lines, fmt.Sprintf("- %s [%s] (id: %s)", title, status, e.EntryID))
  			}
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No requests matching '" + query + "' found."), nil
  		}
  		return mcp.NewToolResultText(fmt.Sprintf("Found %d results:\n%s", len(lines), strings.Join(lines, "\n"))), nil
  	}
  }

  func updateRequestStatusHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		status, err := req.RequireString("status")
  		if err != nil {
  			return mcp.NewToolResultError("status is required"), nil
  		}

  		validStatuses := map[string]bool{"open": true, "assigned": true, "answered": true, "review": true, "published": true}
  		if !validStatuses[status] {
  			return mcp.NewToolResultError("Invalid status. Must be: open, assigned, answered, review, or published"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}
  		if entry.Type != lib.TypeRequest {
  			return mcp.NewToolResultError("Entry is not a request"), nil
  		}

  		// Parse current data, update status
  		var data lib.RequestData
  		if entry.DataText != "" {
  			_ = json.Unmarshal([]byte(entry.DataText), &data)
  		}
  		data.Status = status

  		dataJSON, _ := json.Marshal(data)
  		entry.DataText = string(dataJSON)

  		if err := lib.EntryWrite(db, cfg, userID, entry); err != nil {
  			return mcp.NewToolResultError("Failed to update: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Updated request %s status to '%s'", requestID, status)), nil
  	}
  }

  func addCommentHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		comment, err := req.RequireString("comment")
  		if err != nil {
  			return mcp.NewToolResultError("comment is required"), nil
  		}
  		side, err := req.RequireString("side")
  		if err != nil {
  			return mcp.NewToolResultError("side is required"), nil
  		}

  		if side != "buyer" && side != "seller" {
  			return mcp.NewToolResultError("side must be 'buyer' or 'seller'"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}
  		if entry.Type != lib.TypeRequest {
  			return mcp.NewToolResultError("Entry is not a request"), nil
  		}

  		var data lib.RequestData
  		if entry.DataText != "" {
  			_ = json.Unmarshal([]byte(entry.DataText), &data)
  		}

  		if side == "buyer" {
  			data.BuyerComment = comment
  		} else {
  			data.SellerComment = comment
  		}

  		dataJSON, _ := json.Marshal(data)
  		entry.DataText = string(dataJSON)

  		if err := lib.EntryWrite(db, cfg, userID, entry); err != nil {
  			return mcp.NewToolResultError("Failed to update: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Added %s comment to request %s", side, requestID)), nil
  	}
  }

  func listAnswersHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID, Type: lib.TypeAnswer}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list answers: " + err.Error()), nil
  		}

  		var lines []string
  		for _, e := range entries {
  			lines = append(lines, fmt.Sprintf("- %s (id: %s)", e.SummaryText, e.EntryID))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No answer documents found."), nil
  		}
  		return mcp.NewToolResultText("Answers:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func linkAnswerHandler(db *lib.DB) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		answerID, err := req.RequireString("answer_id")
  		if err != nil {
  			return mcp.NewToolResultError("answer_id is required"), nil
  		}

  		if err := lib.AnswerLinkCreate(db, answerID, requestID, userID); err != nil {
  			return mcp.NewToolResultError("Failed to link answer: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Linked answer %s to request %s", answerID, requestID)), nil
  	}
  }

  func listTasksHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		tasks, err := lib.TasksByUser(db, cfg, userID)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list tasks: " + err.Error()), nil
  		}

  		projectID := req.GetString("project_id", "")

  		var lines []string
  		for _, t := range tasks {
  			if projectID != "" && t.ProjectID != projectID {
  				continue
  			}
  			lines = append(lines, fmt.Sprintf("- %s (id: %s, project: %s, stage: %s)",
  				t.SummaryText, t.EntryID, t.ProjectID, t.Stage))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No tasks assigned to you."), nil
  		}
  		return mcp.NewToolResultText("Your tasks:\n" + strings.Join(lines, "\n")), nil
  	}
  }


id: 0e34f205-c288-43fb-b942-0e6a9ac0302e
session_id: 69d4f621-0c76-43a4-b49f-a02ef9d97c02
path: /home/johan/dev/dealspace/api/mcp.go
version: v4
content:
  package api

  import (
  	"context"
  	"encoding/json"
  	"fmt"
  	"strings"

  	"github.com/mark3labs/mcp-go/mcp"
  	"github.com/mark3labs/mcp-go/server"
  	"github.com/mish/dealspace/lib"
  )

  // NewMCPServer creates an MCP server with all Dealspace tools registered.
  func NewMCPServer(db *lib.DB, cfg *lib.Config) *server.MCPServer {
  	s := server.NewMCPServer(
  		"dealspace",
  		"1.0.0",
  		server.WithToolCapabilities(false),
  		server.WithRecovery(),
  	)

  	s.AddTool(listProjectsTool(), listProjectsHandler(db, cfg))
  	s.AddTool(getProjectTool(), getProjectHandler(db, cfg))
  	s.AddTool(listRequestsTool(), listRequestsHandler(db, cfg))
  	s.AddTool(getRequestTool(), getRequestHandler(db, cfg))
  	s.AddTool(searchRequestsTool(), searchRequestsHandler(db, cfg))
  	s.AddTool(updateRequestStatusTool(), updateRequestStatusHandler(db, cfg))
  	s.AddTool(addCommentTool(), addCommentHandler(db, cfg))
  	s.AddTool(listAnswersTool(), listAnswersHandler(db, cfg))
  	s.AddTool(linkAnswerTool(), linkAnswerHandler(db))
  	s.AddTool(listTasksTool(), listTasksHandler(db, cfg))

  	return s
  }

  // MCPContextFunc propagates user_id from OAuth middleware into MCP tool context.
  func MCPContextFunc(ctx context.Context, r interface{ Context() context.Context }) context.Context {
  	if uid := UserIDFromContext(r.Context()); uid != "" {
  		return context.WithValue(ctx, ctxUserID, uid)
  	}
  	return ctx
  }

  // --- Tool definitions ---

  func listProjectsTool() mcp.Tool {
  	return mcp.NewTool("list_projects",
  		mcp.WithDescription("List all projects the user has access to"),
  	)
  }

  func getProjectTool() mcp.Tool {
  	return mcp.NewTool("get_project",
  		mcp.WithDescription("Get project details including workstreams and summary"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func listRequestsTool() mcp.Tool {
  	return mcp.NewTool("list_requests",
  		mcp.WithDescription("List all requests in a project as a tree (request lists, sections, requests)"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func getRequestTool() mcp.Tool {
  	return mcp.NewTool("get_request",
  		mcp.WithDescription("Get request details including linked answers"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  	)
  }

  func searchRequestsTool() mcp.Tool {
  	return mcp.NewTool("search_requests",
  		mcp.WithDescription("Search requests by keyword in title, description, or comments"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  		mcp.WithString("query", mcp.Description("Search keyword"), mcp.Required()),
  	)
  }

  func updateRequestStatusTool() mcp.Tool {
  	return mcp.NewTool("update_request_status",
  		mcp.WithDescription("Update the status of a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("status", mcp.Description("New status: open, assigned, answered, review, or published"), mcp.Required()),
  	)
  }

  func addCommentTool() mcp.Tool {
  	return mcp.NewTool("add_comment",
  		mcp.WithDescription("Add a buyer or seller comment to a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("comment", mcp.Description("The comment text"), mcp.Required()),
  		mcp.WithString("side", mcp.Description("Which side: buyer or seller"), mcp.Required()),
  	)
  }

  func listAnswersTool() mcp.Tool {
  	return mcp.NewTool("list_answers",
  		mcp.WithDescription("List answer documents in a project"),
  		mcp.WithString("project_id", mcp.Description("The project ID"), mcp.Required()),
  	)
  }

  func linkAnswerTool() mcp.Tool {
  	return mcp.NewTool("link_answer",
  		mcp.WithDescription("Link an existing answer document to a request"),
  		mcp.WithString("request_id", mcp.Description("The request ID"), mcp.Required()),
  		mcp.WithString("answer_id", mcp.Description("The answer entry ID"), mcp.Required()),
  	)
  }

  func listTasksTool() mcp.Tool {
  	return mcp.NewTool("list_tasks",
  		mcp.WithDescription("List tasks assigned to the current user"),
  		mcp.WithString("project_id", mcp.Description("Optional project ID to filter tasks")),
  	)
  }

  // --- Tool handlers ---

  func listProjectsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projects, err := lib.ProjectsByUser(db, cfg, userID)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list projects: " + err.Error()), nil
  		}

  		var lines []string
  		for _, p := range projects {
  			var data map[string]any
  			if p.DataText != "" {
  				_ = json.Unmarshal([]byte(p.DataText), &data)
  			}
  			name, _ := data["name"].(string)
  			if name == "" {
  				name = p.EntryID
  			}
  			lines = append(lines, fmt.Sprintf("- %s (id: %s, stage: %s)", name, p.EntryID, p.Stage))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No projects found."), nil
  		}
  		return mcp.NewToolResultText("Projects:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func getProjectHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, projectID)
  		if err != nil {
  			return mcp.NewToolResultError("Project not found"), nil
  		}
  		if entry.Type != lib.TypeProject {
  			return mcp.NewToolResultError("Not a project"), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Project: %s\nID: %s\nStage: %s\nCreated: %d\nData: %s",
  			entry.SummaryText, entry.EntryID, entry.Stage, entry.CreatedAt, entry.DataText)), nil
  	}
  }

  func listRequestsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		// Verify access
  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list entries: " + err.Error()), nil
  		}

  		// Filter to request types and build tree text
  		var lines []string
  		for _, e := range entries {
  			if e.Type != lib.TypeRequestList && e.Type != lib.TypeSection && e.Type != lib.TypeRequest {
  				continue
  			}
  			indent := strings.Repeat("  ", e.Depth)
  			var data map[string]any
  			if e.DataText != "" {
  				_ = json.Unmarshal([]byte(e.DataText), &data)
  			}

  			switch e.Type {
  			case lib.TypeRequestList:
  				name, _ := data["name"].(string)
  				lines = append(lines, fmt.Sprintf("%s[Request List] %s (id: %s)", indent, name, e.EntryID))
  			case lib.TypeSection:
  				name, _ := data["name"].(string)
  				lines = append(lines, fmt.Sprintf("%s[Section] %s (id: %s)", indent, name, e.EntryID))
  			case lib.TypeRequest:
  				title, _ := data["title"].(string)
  				status, _ := data["status"].(string)
  				priority, _ := data["priority"].(string)
  				lines = append(lines, fmt.Sprintf("%s- %s [%s/%s] (id: %s)", indent, title, status, priority, e.EntryID))
  			}
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No requests found in this project."), nil
  		}
  		return mcp.NewToolResultText("Request tree:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func getRequestHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}

  		result := fmt.Sprintf("Request ID: %s\nProject: %s\nType: %s\nData: %s",
  			entry.EntryID, entry.ProjectID, entry.Type, entry.DataText)

  		// Get linked answers
  		links, err := lib.AnswerLinksByRequest(db, requestID)
  		if err == nil && len(links) > 0 {
  			result += "\n\nLinked Answers:"
  			for _, link := range links {
  				answerEntry, err := lib.EntryByID(db, cfg, link.AnswerID)
  				if err == nil {
  					result += fmt.Sprintf("\n  - %s (id: %s)", answerEntry.SummaryText, link.AnswerID)
  				}
  			}
  		}

  		return mcp.NewToolResultText(result), nil
  	}
  }

  func searchRequestsHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}
  		query, err := req.RequireString("query")
  		if err != nil {
  			return mcp.NewToolResultError("query is required"), nil
  		}

  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID, Type: lib.TypeRequest}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to search: " + err.Error()), nil
  		}

  		queryLower := strings.ToLower(query)
  		var lines []string
  		for _, e := range entries {
  			if strings.Contains(strings.ToLower(e.DataText), queryLower) ||
  				strings.Contains(strings.ToLower(e.SummaryText), queryLower) {
  				var data map[string]any
  				if e.DataText != "" {
  					_ = json.Unmarshal([]byte(e.DataText), &data)
  				}
  				title, _ := data["title"].(string)
  				status, _ := data["status"].(string)
  				lines = append(lines, fmt.Sprintf("- %s [%s] (id: %s)", title, status, e.EntryID))
  			}
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No requests matching '" + query + "' found."), nil
  		}
  		return mcp.NewToolResultText(fmt.Sprintf("Found %d results:\n%s", len(lines), strings.Join(lines, "\n"))), nil
  	}
  }

  func updateRequestStatusHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		status, err := req.RequireString("status")
  		if err != nil {
  			return mcp.NewToolResultError("status is required"), nil
  		}

  		validStatuses := map[string]bool{"open": true, "assigned": true, "answered": true, "review": true, "published": true}
  		if !validStatuses[status] {
  			return mcp.NewToolResultError("Invalid status. Must be: open, assigned, answered, review, or published"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}
  		if entry.Type != lib.TypeRequest {
  			return mcp.NewToolResultError("Entry is not a request"), nil
  		}

  		// Parse current data, update status
  		var data lib.RequestData
  		if entry.DataText != "" {
  			_ = json.Unmarshal([]byte(entry.DataText), &data)
  		}
  		data.Status = status

  		dataJSON, _ := json.Marshal(data)
  		entry.DataText = string(dataJSON)

  		if err := lib.EntryWrite(db, cfg, userID, entry); err != nil {
  			return mcp.NewToolResultError("Failed to update: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Updated request %s status to '%s'", requestID, status)), nil
  	}
  }

  func addCommentHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		comment, err := req.RequireString("comment")
  		if err != nil {
  			return mcp.NewToolResultError("comment is required"), nil
  		}
  		side, err := req.RequireString("side")
  		if err != nil {
  			return mcp.NewToolResultError("side is required"), nil
  		}

  		if side != "buyer" && side != "seller" {
  			return mcp.NewToolResultError("side must be 'buyer' or 'seller'"), nil
  		}

  		entry, err := lib.EntryByID(db, cfg, requestID)
  		if err != nil {
  			return mcp.NewToolResultError("Request not found"), nil
  		}
  		if entry.Type != lib.TypeRequest {
  			return mcp.NewToolResultError("Entry is not a request"), nil
  		}

  		var data lib.RequestData
  		if entry.DataText != "" {
  			_ = json.Unmarshal([]byte(entry.DataText), &data)
  		}

  		if side == "buyer" {
  			data.BuyerComment = comment
  		} else {
  			data.SellerComment = comment
  		}

  		dataJSON, _ := json.Marshal(data)
  		entry.DataText = string(dataJSON)

  		if err := lib.EntryWrite(db, cfg, userID, entry); err != nil {
  			return mcp.NewToolResultError("Failed to update: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Added %s comment to request %s", side, requestID)), nil
  	}
  }

  func listAnswersHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		projectID, err := req.RequireString("project_id")
  		if err != nil {
  			return mcp.NewToolResultError("project_id is required"), nil
  		}

  		if err := lib.CheckAccessRead(db, userID, projectID, ""); err != nil {
  			return mcp.NewToolResultError("Access denied"), nil
  		}

  		filter := lib.EntryFilter{ProjectID: projectID, Type: lib.TypeAnswer}
  		entries, err := lib.EntryRead(db, cfg, userID, projectID, filter)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list answers: " + err.Error()), nil
  		}

  		var lines []string
  		for _, e := range entries {
  			lines = append(lines, fmt.Sprintf("- %s (id: %s)", e.SummaryText, e.EntryID))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No answer documents found."), nil
  		}
  		return mcp.NewToolResultText("Answers:\n" + strings.Join(lines, "\n")), nil
  	}
  }

  func linkAnswerHandler(db *lib.DB) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		requestID, err := req.RequireString("request_id")
  		if err != nil {
  			return mcp.NewToolResultError("request_id is required"), nil
  		}
  		answerID, err := req.RequireString("answer_id")
  		if err != nil {
  			return mcp.NewToolResultError("answer_id is required"), nil
  		}

  		if err := lib.AnswerLinkCreate(db, answerID, requestID, userID); err != nil {
  			return mcp.NewToolResultError("Failed to link answer: " + err.Error()), nil
  		}

  		return mcp.NewToolResultText(fmt.Sprintf("Linked answer %s to request %s", answerID, requestID)), nil
  	}
  }

  func listTasksHandler(db *lib.DB, cfg *lib.Config) server.ToolHandlerFunc {
  	return func(ctx context.Context, req mcp.CallToolRequest) (*mcp.CallToolResult, error) {
  		userID := UserIDFromContext(ctx)
  		if userID == "" {
  			return mcp.NewToolResultError("Not authenticated"), nil
  		}

  		tasks, err := lib.TasksByUser(db, cfg, userID)
  		if err != nil {
  			return mcp.NewToolResultError("Failed to list tasks: " + err.Error()), nil
  		}

  		projectID := req.GetString("project_id", "")

  		var lines []string
  		for _, t := range tasks {
  			if projectID != "" && t.ProjectID != projectID {
  				continue
  			}
  			lines = append(lines, fmt.Sprintf("- %s (id: %s, project: %s, stage: %s)",
  				t.SummaryText, t.EntryID, t.ProjectID, t.Stage))
  		}

  		if len(lines) == 0 {
  			return mcp.NewToolResultText("No tasks assigned to you."), nil
  		}
  		return mcp.NewToolResultText("Your tasks:\n" + strings.Join(lines, "\n")), nil
  	}
  }


