fix: widget UX polish — remove Settings, fix download, improve popover (#5072)

## Summary

Widget UX polish — multiple fixes from live testing in Claude.ai.

### UX Changes
- **Remove Settings button** — format dropdown (CSV/TSV/JSON) was
unnecessary complexity. Copy always uses CSV.
- **Popover not cut off** — wider (560px, 90vw cap), scrollable content
- **"... more" visually clickable** — pill-style background highlight
- **Download CSV** — uses `app.openLink()` (ext-apps SDK) with
copy-modal fallback for iframe sandbox restrictions
- **Bump ext-apps SDK 1.0.1 → 1.3.1** — adds `sendMessage`, `openLink`,
`updateModelContext`

### Completion Notification
- On task completion, widget calls `app.sendMessage()` to prefill the
composer with "The task is now done. Get the results."
- User hits Enter → Claude calls `futuresearch_results` → presents
results + download link
- `futuresearch_status` prompts updated: "do not proactively call
futuresearch_results" → "call if user asks to see results"

### What didn't work (Claude.ai limitations)
- `updateModelContext` — not surfaced to the model by Claude.ai
(removed)
- `window.open` — blocked by iframe sandbox `allow-popups`
- `navigator.clipboard` — blocked by permissions policy
- `sendMessage` — prefills composer only, doesn't auto-send (Claude
design choice)

## Test plan

- [x] Tested in Claude.ai via CF tunnel
- [x] Task completion → composer prefilled → user sends → Claude calls
futuresearch_results
- [x] Download CSV → openLink or copy modal fallback
- [x] Popover scrollable, not cut off
- [x] "... more" pill style visible
- [x] No Settings button
- [x] 356 tests pass

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Sourced from commit c327fa84ccd3c5637208a8a84cea784c498119fd

Author: RafaelPo

futuresearch-mcp/src/futuresearch_mcp/templates.py

@@ -107,10 +107,10 @@
 .hdr-row .row-num{z-index:4;font-weight:600;color:var(--text-sec);cursor:default;background:var(--bg-toolbar)}
 .flt-row .row-num{z-index:4;cursor:default;background:var(--bg-toolbar)}
 tr.selected .row-num{background:var(--bg-selected)!important}
-.popover{position:fixed;background:var(--pop-bg);border:1px solid var(--border);border-radius:4px;box-shadow:var(--pop-shadow);max-width:420px;min-width:200px;z-index:100;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s;pointer-events:none}
+.popover{position:fixed;background:var(--pop-bg);border:1px solid var(--border);border-radius:4px;box-shadow:var(--pop-shadow);max-width:min(720px,90vw);min-width:280px;max-height:min(500px,70vh);z-index:100;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s;pointer-events:none;display:flex;flex-direction:column}
 .popover.visible{opacity:1;transform:translateY(0);pointer-events:auto}
 .pop-hdr{padding:8px 12px;font-size:10px;font-weight:600;color:var(--text-sec);border-bottom:1px solid var(--border-light);background:var(--bg-alt);text-transform:uppercase;letter-spacing:0.03em}
-.pop-body{padding:10px 12px;font-size:11px;line-height:1.5;white-space:pre-wrap;max-height:300px;overflow-y:auto;color:var(--text)}
+.pop-body{padding:10px 12px;font-size:11px;line-height:1.5;white-space:pre-wrap;overflow-y:auto;color:var(--text);flex:1}
 .toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--toast-bg);color:var(--toast-text);padding:6px 16px;border-radius:4px;font-size:11px;font-weight:500;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:200}
 .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
 .resize-handle{height:4px;background:var(--border-light);cursor:ns-resize;border-radius:0 0 4px 4px;transition:background .15s;margin-top:-1px;border:1px solid var(--border);border-top:none}
@@ -132,26 +132,17 @@
 body.col-resizing,body.col-resizing *{cursor:col-resize!important;user-select:none!important}
 body.row-resizing,body.row-resizing *{cursor:row-resize!important;user-select:none!important}
 .cell-text{display:inline}
-.cell-more,.cell-less{cursor:pointer;color:var(--accent);font-size:10px;margin-left:2px;white-space:nowrap;font-weight:500}
-.cell-more:hover,.cell-less:hover{text-decoration:underline;text-underline-offset:2px}
+.cell-more,.cell-less{cursor:pointer;color:var(--accent);font-size:10px;margin-left:4px;white-space:nowrap;font-weight:500;padding:1px 4px;border-radius:3px;background:rgba(77,79,189,0.08)}
+.cell-more:hover,.cell-less:hover{text-decoration:underline;text-underline-offset:2px;background:rgba(77,79,189,0.15)}
 .export-btns{display:inline-flex;gap:2px}
-.export-btns button{padding:3px 8px;font-size:10px}
+.export-btns a{font-family:inherit}
 #globalSearch{padding:4px 8px;border:1px solid var(--input-border);border-radius:4px;font-size:11px;background:var(--input-bg);color:var(--text);outline:none;width:160px;transition:border-color .15s ease,width .2s ease;font-family:inherit}
 #globalSearch:focus{border-color:var(--input-focus);width:220px}
 #globalSearch::placeholder{color:var(--text-dim)}
 .col-ghost{position:fixed;background:var(--bg-toolbar);border:1px solid var(--accent);border-radius:4px;padding:4px 8px;font-size:11px;font-weight:600;opacity:.85;pointer-events:none;z-index:200;white-space:nowrap}
 body.col-dragging,body.col-dragging *{cursor:grabbing!important;user-select:none!important}
 .hdr-row th.drag-over-left{box-shadow:inset 3px 0 0 var(--accent)}
 .hdr-row th.drag-over-right{box-shadow:inset -3px 0 0 var(--accent)}
-.settings-wrap{position:relative;display:inline-block}
-#settingsBtn{font-size:14px;padding:5px 8px}
-.settings-drop{position:absolute;top:100%;right:0;margin-top:4px;background:var(--pop-bg);border:1px solid var(--border);border-radius:4px;box-shadow:var(--pop-shadow);padding:8px 0;z-index:100;min-width:130px;display:none}
-.settings-drop.show{display:block}
-.settings-drop .drop-hdr{padding:2px 12px;font-size:10px;font-weight:600;color:var(--text-sec);text-transform:uppercase;letter-spacing:0.03em}
-.settings-drop label{display:flex;align-items:center;gap:6px;padding:4px 12px;font-size:11px;cursor:pointer;white-space:nowrap}
-.settings-drop label:hover{background:var(--bg-hover)}
-.settings-drop input[type="radio"]{margin:0}
-.settings-drop .drop-sep{border-top:1px solid var(--border-light);margin:4px 0}
 /* ── Widget frame ── */
 .widget-frame{border:1px solid var(--border);border-radius:4px;margin:4px;overflow:hidden}
 </style></head><body>
@@ -182,8 +173,7 @@
   <span id="sum">Loading...</span>
   <button id="selAllBtn">Select all</button>
   <button id="copyBtn" disabled>Copy CSV (0)</button>
-  <span class="export-btns"><button id="exportLink" title="Copy CSV download link to clipboard">Copy link</button></span>
-  <span class="settings-wrap"><button id="settingsBtn" title="Settings">Settings</button><div id="settingsDrop" class="settings-drop"><div class="drop-hdr">Copy format</div><label><input type="radio" name="cfmt" value="csv" checked> CSV</label><label><input type="radio" name="cfmt" value="tsv"> TSV (tabs)</label><label><input type="radio" name="cfmt" value="json"> JSON</label></div></span>
+  <span class="export-btns"><button id="exportLink" title="Copy CSV download link to clipboard">Download CSV</button></span>
 </div>
 <div class="wrap" id="wrap" style="max-height:520px"><table id="tbl"></table></div>
 <div class="resize-handle" id="resizeHandle"></div>
@@ -226,15 +216,14 @@
 let sessionUrl="",csvUrl="",pollToken="",downloadUrl="";
 const TRUNC=200;
 let didDrag=false;
-let copyFmt="csv";
+const copyFmt="csv";
 let widgetActive=false;
-const settingsBtn=document.getElementById("settingsBtn");
-const settingsDrop=document.getElementById("settingsDrop");
 const S={rows:[],allCols:[],filteredIdx:[],sortCol:null,sortDir:0,filters:{},globalQuery:"",selected:new Set(),lastClick:null,isFullscreen:false,focusedCell:null};
 
 /* ── progress state ── */
 let pollUrl=null,pollTimer=null,wasDone=false,pollCursor=null;
-let progressMode=false,resultsFetched=false;
+let progressMode=false,resultsFetched=false,notifiedClaude=false;
+let currentTaskId=null;
 const aggHistory=[];  /* [{aggregate,micros:[{text,row_index}],ts}] */
 let activeTab="activity";
 
@@ -382,11 +371,22 @@
     progressSection.classList.add("flash");
     /* auto-fetch results on completion */
     if(!resultsFetched)autoFetchResults();
+    /* notify Claude so it can present results in the conversation */
+    notifyClaude(d);
   }
   if(done&&pollTimer){clearInterval(pollTimer);pollTimer=null;}
 }
 
 
+/* ── notify Claude on completion so it can present results ── */
+async function notifyClaude(d){
+  if(notifiedClaude||!currentTaskId)return;
+  notifiedClaude=true;
+  try{
+    await app.sendMessage({role:"user",content:[{type:"text",text:"The task is now done. Get the results."}]});
+  }catch(e){console.error("[notify] sendMessage failed:",e);}
+}
+
 /* ── auto-fetch results on completion ── */
 async function autoFetchResults(){
   if(resultsFetched)return;
@@ -430,6 +430,9 @@
   activityTab.style.display="block";
   resultsTab.style.display="none";
   sessionUrl=d.session_url||sessionUrl;
+  if(d.task_id)currentTaskId=d.task_id;
+  /* Extract task_id from progress_url as fallback */
+  if(!currentTaskId&&d.progress_url){const m=d.progress_url.match(/progress\\/([0-9a-f-]+)/);if(m)currentTaskId=m[1];}
   if(d.poll_token)pollToken=d.poll_token;
   if(d.download_url)downloadUrl=d.download_url;
   renderProgress(d);
@@ -707,21 +710,16 @@
   if(!S.selected.size)return;
   const text=buildCopyText();
   const msg="Copied "+S.selected.size+" row"+(S.selected.size>1?"s":"")+" as "+copyFmt.toUpperCase();
+  /* Clipboard API often fails in sandboxed iframes — try it first,
+     fall back to execCommand, then show modal for manual copy. */
   try{await navigator.clipboard.writeText(text);showToast(msg);return;}catch{}
-  if(execCopy(text)){showToast(msg);return;}
+  try{if(execCopy(text)){showToast(msg);return;}}catch{}
   showCopyModal(text);
 });
 closeCopyModal.addEventListener("click",()=>copyModal.classList.remove("show"));
 copyModal.addEventListener("click",e=>{if(e.target===copyModal)copyModal.classList.remove("show");});
 function showToast(msg){toast.textContent=msg;toast.classList.add("show");setTimeout(()=>toast.classList.remove("show"),2000);}
 
-/* --- settings dropdown --- */
-settingsBtn.addEventListener("click",e=>{e.stopPropagation();settingsDrop.classList.toggle("show");});
-document.addEventListener("click",()=>settingsDrop.classList.remove("show"));
-settingsDrop.addEventListener("click",e=>e.stopPropagation());
-settingsDrop.querySelectorAll('input[name="cfmt"]').forEach(r=>{
-  r.addEventListener("change",()=>{copyFmt=r.value;updateCopyBtn();});
-});
 
 /* --- popover --- */
 let popTimer=null,popTarget=null,popVisible=false;
@@ -938,7 +936,7 @@
 document.getElementById("exportLink")?.addEventListener("click",()=>{
   const url=getDownloadUrl();
   if(!url){showToast("No download link yet");return;}
-  copyToClipboard(url).then(ok=>{if(ok)showToast("Link copied");});
+  app.openLink({url}).catch(()=>showCopyModal(url));
 });
 
 /* --- row resize (drag bottom border) --- */

futuresearch-mcp/src/futuresearch_mcp/tools.py

@@ -1005,8 +1005,9 @@ async def futuresearch_status(
 
     Returns a progress widget that auto-updates via REST polling.
     The widget handles both progress tracking and result display.
-    After calling this once, do NOT call futuresearch_progress or
-    futuresearch_results — the widget handles everything automatically.
+    After calling this once, do NOT call futuresearch_progress — the
+    widget polls automatically. Only call futuresearch_results if the
+    user explicitly asks to see or discuss the results in the chat.
     """
     logger.debug("futuresearch_status: task_id=%s", params.task_id)
     task_id = params.task_id
@@ -1067,7 +1068,8 @@ async def futuresearch_status(
         text = dedent(f"""\
             Completed: {ts.completed}/{ts.total} ({ts.failed} failed) in {ts.elapsed_s}s.
             Results are loading in the widget above.
-            Do NOT call futuresearch_results — the widget displays all results.
+            Do NOT proactively call futuresearch_results — the widget displays results automatically.
+            If the user asks to see, discuss, or analyze the results, call futuresearch_results(task_id='{task_id}') to load them into the conversation.
             Wait for the user to tell you what to do next.""")
     else:
         fail_part = f", {ts.failed} failed" if ts.failed else ""
@@ -1076,7 +1078,7 @@ async def futuresearch_status(
             Progress and results are handled by the widget above.
 
             Important:
-            - Do NOT call futuresearch_results — the widget loads results automatically when the task completes.
+            - Do NOT proactively call futuresearch_results — the widget loads results automatically when the task completes. Only call it if the user asks to see or discuss the results.
             - Do NOT call futuresearch_progress — the widget polls automatically.
             - Do NOT call futuresearch_status again.
             - Wait for the user to tell you what to do next.