pi-interview 0.8.5 → 0.8.7

package/README.md

@@ -28,7 +28,7 @@ Restart pi to load the extension.
 - **Conviction & Weight**: Control recommendation strength (`conviction`) and visual prominence (`weight`)
 - **"Other" Option**: Single/multi select questions support custom text input
 - **Per-Question Attachments**: Attach images to any question via button or drag & drop
-- **Keyboard Navigation**: Full keyboard support with arrow keys, Tab, Enter
+- **Keyboard Navigation**: Full keyboard support with `⌘+←`/`⌘+→` (`Ctrl` off macOS), arrow keys, Tab, Enter
 - **Auto-save**: Responses saved to localStorage, restored on reload
 - **Session Timeout**: Configurable timeout with countdown badge, refreshes on activity
 - **Multi-Agent Support**: Queue detection prevents focus stealing when multiple agents run interviews
@@ -39,7 +39,7 @@ Restart pi to load the extension.
 - **Image Support**: Drag & drop anywhere on question, file picker, or paste a path into the dedicated path field
 - **Path Normalization**: Handles shell-escaped paths (`\ `) and macOS screenshot filenames (narrow no-break space before AM/PM)
 - **Generate & Review Options**: Single/multi-select questions, including rich-option questions with inline content blocks, show "✦ Generate more" (appends new choices) and "↻ Review options" (reviews options and rewrites the question for clarity) buttons powered by an LLM
-- **Ask About an Option**: Single/multi options, including rich options with inline content blocks, can open an inline assistant panel with prompt chips, freeform follow-up questions, provider/model overrides under Advanced, and actions like pinning analysis or applying a suggested rewrite
+- **Ask About an Option**: Single/multi options, including rich options with inline content blocks, can open an inline assistant panel with prompt chips, freeform follow-up questions, provider/model overrides under Advanced, and auto-saved option analysis
 - **Option Clarifications**: Single/multi options, including rich options with inline content blocks, can reveal a separate inline `Optional clarification...` field when selected, letting users attach a short note to a choice without using `Ask`
 - **Tool Discoverability (pi v0.59+)**: Registers a `promptSnippet` so `interview` remains eligible for inclusion in pi's default `Available tools` prompt section
 - **Themes**: Built-in default + optional light/dark + custom theme CSS
@@ -287,10 +287,10 @@ All media types support `position`: `"above"` (default), `"below"`, or `"side"`
 | Key | Action |
 |-----|--------|
 | `↑` `↓` | Navigate options |
-| `←` `→` | Navigate between questions |
+| `⌘+←` `⌘+→` | Navigate between questions (`Ctrl` off macOS) |
 | `Tab` | Cycle through options |
 | `Enter` / `Space` | Select option |
-| `⌘+V` | Paste image or file path |
+| `⌘+V` | Paste text in the focused input |
 | `⌘+Enter` | Submit form |
 | `Esc` | Show exit overlay (press twice to quit) |
 | `⌘+Shift+L` | Toggle theme (if enabled; appears in shortcuts bar) |

package/form/index.html

@@ -42,7 +42,7 @@
         <span class="shortcut-label">Options</span>
       </div>
       <div class="shortcut">
-        <span class="shortcut-keys"><kbd>←</kbd><kbd>→</kbd></span>
+        <span class="shortcut-keys"><kbd class="mod-key">⌘</kbd><kbd>←</kbd><kbd>→</kbd></span>
         <span class="shortcut-label">Questions</span>
       </div>
       <div class="shortcut-divider"></div>

package/form/script.js

@@ -568,25 +568,6 @@
     return note ? { option, note } : { option };
   }
 
-  function renameChoiceAnswerValue(question, value, previousOption, nextOption) {
-    if (!nextOption || (question.type !== "single" && question.type !== "multi")) {
-      return value;
-    }
-
-    if (question.type === "single") {
-      const choiceValue = normalizeChoiceResponseValue(value);
-      if (!choiceValue || choiceValue.option !== previousOption) return value;
-      return choiceValue.note ? { option: nextOption, note: choiceValue.note } : { option: nextOption };
-    }
-
-    if (!Array.isArray(value)) return value;
-    return value.map((item) => {
-      const choiceValue = normalizeChoiceResponseValue(item);
-      if (!choiceValue || choiceValue.option !== previousOption) return item;
-      return choiceValue.note ? { option: nextOption, note: choiceValue.note } : { option: nextOption };
-    });
-  }
-
   function preserveChoiceAnswerValue(question, value, validLabels) {
     if (question.type === "single") {
       const choiceValue = normalizeChoiceResponseValue(value);
@@ -775,6 +756,7 @@
       selectedProvider: parsed.provider || getFirstProvider(),
       selectedModel,
       selectedDepth: "standard",
+      savedInsightId: null,
       abortController: null,
     };
   }
@@ -848,15 +830,6 @@
     }
   }
 
-  function updatePinnedInsightOptionText(questionId, optionKey, optionText) {
-    const existing = optionInsightState.pinned.get(questionId) || [];
-    existing.forEach((insight) => {
-      if (insight.optionKey === optionKey) {
-        insight.optionText = optionText;
-      }
-    });
-  }
-
   function pruneQuestionOptionInsights(questionId) {
     const validKeys = new Set(getOptionKeys(questionId));
     const existing = optionInsightState.pinned.get(questionId) || [];
@@ -930,7 +903,7 @@
   }
 
   function applyQuestionValue(question, value) {
-    populateForm({ [question.id]: value }, { preserveChoiceNotes: true });
+    populateQuestion(question, { [question.id]: value }, { preserveChoiceNotes: true });
     if (question.type === "multi") {
       updateDoneState(question.id);
     }
@@ -962,55 +935,6 @@
     }
   }
 
-  async function runOptionAction(question, optionKey, action, text) {
-    const preservedValue = getQuestionValue(question);
-    const previousText = getOptionTextByKey(question.id, optionKey);
-    try {
-      const response = await fetch("/option-action", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ token: sessionToken, questionId: question.id, optionKey, action, text }),
-      });
-      const result = await response.json();
-      if (!result.ok) throw new Error(result.error || "Option action failed");
-
-      if (result.question && Array.isArray(result.question.options)) {
-        question.options = result.question.options;
-        question.recommended = result.question.recommended;
-        question.conviction = result.question.conviction;
-      }
-      if (Array.isArray(result.optionKeys)) {
-        setOptionKeys(question.id, result.optionKeys);
-        pruneQuestionOptionInsights(question.id);
-      }
-
-      if (action === "replace-text") {
-        const nextText = getOptionTextByKey(question.id, optionKey);
-        updatePinnedInsightOptionText(question.id, optionKey, nextText);
-        if (optionInsightState.active && optionInsightState.active.questionId === question.id && optionInsightState.active.optionKey === optionKey && optionInsightState.active.result) {
-          optionInsightState.active.result.suggestedText = nextText;
-        }
-      }
-
-      let nextValue = preservedValue;
-      if (action === "replace-text" && text) {
-        nextValue = renameChoiceAnswerValue(question, preservedValue, previousText, text);
-      }
-
-      replaceQuestionOptionList(question, nextValue, optionKey);
-      debounceSave();
-      refreshCountdown();
-      return true;
-    } catch (err) {
-      const active = getActiveInsight(question.id, optionKey);
-      if (active) {
-        active.error = err instanceof Error ? err.message : "Option action failed";
-        replaceQuestionOptionList(question, preservedValue, optionKey);
-      }
-      return false;
-    }
-  }
-
   async function submitOptionInsight(question, optionKey) {
     const active = getActiveInsight(question.id, optionKey);
     if (!active) return;
@@ -1028,6 +952,8 @@
 
     active.loading = true;
     active.error = "";
+    active.result = null;
+    active.savedInsightId = null;
     active.abortController = new AbortController();
     replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
 
@@ -1056,7 +982,7 @@
       };
       active.error = "";
       const optionText = typeof result.optionText === "string" ? result.optionText : getOptionTextByKey(question.id, optionKey);
-      updatePinnedInsightOptionText(question.id, optionKey, optionText);
+      saveActiveInsight(question, optionKey, optionText);
       refreshCountdown();
     } catch (err) {
       if (!(err instanceof Error && err.name === "AbortError")) {
@@ -1071,13 +997,13 @@
     }
   }
 
-  function pinActiveInsight(question, optionKey) {
+  function saveActiveInsight(question, optionKey, optionText) {
     const active = getActiveInsight(question.id, optionKey);
     if (!active || !active.result) return;
-    const optionText = getOptionTextByKey(question.id, optionKey);
+    const insightId = active.savedInsightId || makeClientId("insight");
     const questionInsights = optionInsightState.pinned.get(question.id) || [];
-    questionInsights.push({
-      id: makeClientId("insight"),
+    const nextInsight = {
+      id: insightId,
       questionId: question.id,
       optionKey,
       optionText,
@@ -1087,10 +1013,16 @@
       suggestedText: active.result.suggestedText,
       modelUsed: active.result.modelUsed ?? null,
       createdAt: new Date().toISOString(),
-    });
+    };
+    const existingIndex = questionInsights.findIndex((insight) => insight.id === insightId);
+    if (existingIndex === -1) {
+      questionInsights.push(nextInsight);
+    } else {
+      questionInsights[existingIndex] = nextInsight;
+    }
+    active.savedInsightId = insightId;
     optionInsightState.pinned.set(question.id, questionInsights);
     debounceSave();
-    replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
   }
 
   function createPinnedInsightCard(question, optionKey, insight) {
@@ -1105,18 +1037,18 @@
     prompt.textContent = insight.prompt;
     head.appendChild(prompt);
 
-    const unpin = document.createElement("button");
-    unpin.type = "button";
-    unpin.className = "option-insight-unpin";
-    unpin.textContent = "Unpin";
-    unpin.addEventListener("click", (event) => {
+    const remove = document.createElement("button");
+    remove.type = "button";
+    remove.className = "option-insight-remove";
+    remove.textContent = "Remove";
+    remove.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
       removePinnedInsight(question.id, insight.id);
       debounceSave();
       replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
     });
-    head.appendChild(unpin);
+    head.appendChild(remove);
     card.appendChild(head);
 
     const summary = document.createElement("p");
@@ -1367,57 +1299,6 @@
         result.appendChild(meta);
       }
 
-      const resultActions = document.createElement("div");
-      resultActions.className = "option-insight-result-actions";
-
-      const pinBtn = document.createElement("button");
-      pinBtn.type = "button";
-      pinBtn.className = "option-insight-secondary";
-      pinBtn.textContent = "Pin";
-      pinBtn.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        pinActiveInsight(question, optionKey);
-      });
-      resultActions.appendChild(pinBtn);
-
-      const moveUpBtn = document.createElement("button");
-      moveUpBtn.type = "button";
-      moveUpBtn.className = "option-insight-secondary";
-      moveUpBtn.textContent = "Move up";
-      moveUpBtn.disabled = getOptionIndexByKey(question.id, optionKey) <= 0;
-      moveUpBtn.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        runOptionAction(question, optionKey, "move-up");
-      });
-      resultActions.appendChild(moveUpBtn);
-
-      if (active.result.suggestedText) {
-        const replaceBtn = document.createElement("button");
-        replaceBtn.type = "button";
-        replaceBtn.className = "option-insight-primary";
-        replaceBtn.textContent = "Use rewrite";
-        replaceBtn.addEventListener("click", (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          runOptionAction(question, optionKey, "replace-text", active.result.suggestedText);
-        });
-        resultActions.appendChild(replaceBtn);
-
-        const addBtn = document.createElement("button");
-        addBtn.type = "button";
-        addBtn.className = "option-insight-secondary";
-        addBtn.textContent = "Add rewrite as option";
-        addBtn.addEventListener("click", (event) => {
-          event.preventDefault();
-          event.stopPropagation();
-          runOptionAction(question, optionKey, "add-option", active.result.suggestedText);
-        });
-        resultActions.appendChild(addBtn);
-      }
-
-      result.appendChild(resultActions);
       panel.appendChild(result);
     }
 
@@ -1441,7 +1322,6 @@
       setChoiceNote(question.id, optionLabel, input.value);
       debounceSave();
     });
-    setupEdgeNavigation(input);
     wrap.appendChild(input);
 
     return wrap;
@@ -1468,10 +1348,10 @@
     const main = document.createElement("div");
     main.className = "option-row-main";
 
-    const label = document.createElement("label");
-    label.className = "option-item";
+    const item = document.createElement("div");
+    item.className = "option-item";
     if (optionContent) {
-      label.classList.add("has-code");
+      item.classList.add("has-code");
     }
     const input = document.createElement("input");
     input.type = question.type === "single" ? "radio" : "checkbox";
@@ -1492,7 +1372,9 @@
 
     const text = document.createElement("span");
     text.className = "option-item-label";
+    text.id = `${input.id}-label`;
     text.textContent = optionLabel;
+    input.setAttribute("aria-labelledby", text.id);
 
     const recommendedList = resolveRecommendedLabels(question.recommended, question.options || []);
     const shouldPreselect = recommendedList.length > 0 && question.conviction !== "slight";
@@ -1516,10 +1398,19 @@
       }
     }
 
-    label.appendChild(input);
-    label.appendChild(body);
+    item.appendChild(input);
+    item.appendChild(body);
+    item.addEventListener("click", (event) => {
+      if (!(event.target instanceof Element)) return;
+      if (event.target === input || event.target.closest("button, input, textarea, select, a")) return;
+      const selection = window.getSelection();
+      if (selection && !selection.isCollapsed && item.contains(selection.anchorNode) && item.contains(selection.focusNode)) {
+        return;
+      }
+      input.click();
+    });
 
-    main.appendChild(label);
+    main.appendChild(item);
     const selectedLabels = new Set(getSelectedOptionLabels(question.id));
     const noteInput = createOptionNoteInput(question, optionLabel, input.checked || selectedLabels.has(optionLabel));
 
@@ -1545,7 +1436,8 @@
         if (noteInput) row.appendChild(noteInput);
       }
 
-      const pinnedInsights = getPinnedInsights(question.id, optionKey);
+      const pinnedInsights = getPinnedInsights(question.id, optionKey)
+        .filter((insight) => insight.id !== activeInsight?.savedInsightId);
       if (pinnedInsights.length > 0) {
         const pinnedWrap = document.createElement("div");
         pinnedWrap.className = "option-insight-pinned-list";
@@ -1614,7 +1506,6 @@
       if (question.type === "multi") updateDoneState(question.id);
       if (otherCheck.checked) otherInput.focus();
     });
-    setupEdgeNavigation(otherInput);
     otherLabel.appendChild(otherCheck);
     otherLabel.appendChild(otherInput);
     list.appendChild(otherLabel);
@@ -1913,6 +1804,37 @@
     return event.key.length === 1;
   }
 
+  function isQuestionNavShortcut(event, direction) {
+    const key = direction === "prev" ? "ArrowLeft" : "ArrowRight";
+    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+    const modPressed = isMac ? event.metaKey : event.ctrlKey;
+    const otherModPressed = isMac ? event.ctrlKey : event.metaKey;
+    return event.key === key && modPressed && !otherModPressed && !event.altKey && !event.shiftKey;
+  }
+
+  function isEditableTextControl(element) {
+    if (element instanceof HTMLTextAreaElement) return true;
+    if (!(element instanceof HTMLInputElement)) return false;
+    return ["password", "search", "tel", "text", "url"].includes(element.type);
+  }
+
+  function handlePaste(event) {
+    const active = document.activeElement;
+    if (!isEditableTextControl(active)) return;
+
+    const text = event.clipboardData?.getData("text/plain");
+    if (typeof text !== "string" || text.length === 0) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+    const start = active.selectionStart ?? active.value.length;
+    const end = active.selectionEnd ?? start;
+    active.setRangeText(text, start, end, "end");
+    active.dispatchEvent(new Event("input", { bubbles: true }));
+    refreshCountdown();
+    debounceSave();
+  }
+
   function maybeStartOtherInput(event) {
     const active = document.activeElement;
     if (!(active instanceof HTMLInputElement)) return false;
@@ -2345,21 +2267,6 @@
     });
   }
 
-  function setupEdgeNavigation(element) {
-    element.addEventListener("keydown", (e) => {
-      if (e.key === "ArrowRight" && element.selectionStart === element.value.length) {
-        e.preventDefault();
-        e.stopPropagation();
-        nextQuestion();
-      }
-      if (e.key === "ArrowLeft" && element.selectionStart === 0) {
-        e.preventDefault();
-        e.stopPropagation();
-        prevQuestion();
-      }
-    });
-  }
-
   function highlightOption(card, optionIndex, isKeyboard = true) {
     const options = getOptionsForCard(card);
     options.forEach((opt, i) => {
@@ -2538,19 +2445,15 @@
 
     if (inAskArea || inOptionNote) return;
 
-    if (event.key === 'ArrowLeft') {
-      if (isTextFocused || isPathInput(document.activeElement)) {
-        return;
-      }
+    if (isQuestionNavShortcut(event, "prev")) {
+      if (isEditableTextControl(document.activeElement)) return;
       event.preventDefault();
       prevQuestion();
       return;
     }
-    
-    if (event.key === 'ArrowRight') {
-      if (isTextFocused || isPathInput(document.activeElement)) {
-        return;
-      }
+
+    if (isQuestionNavShortcut(event, "next")) {
+      if (isEditableTextControl(document.activeElement)) return;
       event.preventDefault();
       nextQuestion();
       return;
@@ -2685,6 +2588,7 @@
       input.setAttribute('tabindex', '-1');
     });
     
+    document.addEventListener("paste", handlePaste, true);
     document.addEventListener('keydown', handleQuestionKeydown);
     
     if (nav.cards.length > 0) {
@@ -2944,7 +2848,6 @@
       textarea.addEventListener("input", () => {
         debounceSave();
       });
-      setupEdgeNavigation(textarea);
       card.appendChild(textarea);
     }
 
@@ -2995,7 +2898,6 @@
           pathInput.value = "";
         }
       });
-      setupEdgeNavigation(pathInput);
       
       const selectedItems = document.createElement("div");
       selectedItems.className = "image-selected-items";
@@ -3015,12 +2917,12 @@
             input.click();
           }
         }
-        if (e.key === "ArrowRight") {
+        if (isQuestionNavShortcut(e, "next")) {
           e.preventDefault();
           e.stopPropagation();
           nextQuestion();
         }
-        if (e.key === "ArrowLeft") {
+        if (isQuestionNavShortcut(e, "prev")) {
           e.preventDefault();
           e.stopPropagation();
           prevQuestion();
@@ -3131,7 +3033,6 @@
           attachBtn.focus();
         }
       });
-      setupEdgeNavigation(attachPath);
       
       attachInline.appendChild(attachFileInput);
       attachInline.appendChild(attachDrop);
@@ -3395,76 +3296,34 @@
     return value.map((item) => normalizeChoiceResponseValue(item)).filter(Boolean);
   }
 
-  function populateForm(saved, options = {}) {
+  function populateQuestion(question, saved, options = {}) {
     const { preserveChoiceNotes = false } = options;
-    if (!saved) return;
-    questions.forEach((question) => {
-      const hasSavedValue = Object.prototype.hasOwnProperty.call(saved, question.id);
-      const value = saved[question.id];
-      if (question.type === "single") {
-        const radios = formEl.querySelectorAll(
-          `input[name="${escapeSelector(question.id)}"]`
-        );
-        radios.forEach((radio) => {
-          radio.checked = false;
-        });
-        if (!preserveChoiceNotes) {
-          clearChoiceNotes(question.id);
-        }
-        if (!hasSavedValue) return;
-        const choiceValue = getSavedSingleChoiceValue(value);
-        if (!choiceValue) return;
-        if (choiceValue.option !== "") {
-          const input = formEl.querySelector(
-            `input[name="${escapeSelector(question.id)}"][value="${escapeSelector(choiceValue.option)}"]`
-          );
-          if (input) {
-            input.checked = true;
-            if (questionSupportsOptionInsights(question) && choiceValue.note) {
-              setChoiceNote(question.id, choiceValue.option, choiceValue.note);
-            }
-          } else {
-            const otherCheck = formEl.querySelector(
-              `input[name="${escapeSelector(question.id)}"][value="__other__"]`
-            );
-            const otherInput = formEl.querySelector(
-              `.other-input[data-question-id="${escapeSelector(question.id)}"]`
-            );
-            if (otherCheck && otherInput) {
-              otherCheck.checked = true;
-              otherInput.value = choiceValue.option;
-              otherInput.dispatchEvent(new Event("input", { bubbles: true }));
-            }
-          }
-        }
-      }
-      if (question.type === "multi") {
-        const checkboxes = formEl.querySelectorAll(
-          `input[name="${escapeSelector(question.id)}"]`
+    const hasSavedValue = saved && Object.prototype.hasOwnProperty.call(saved, question.id);
+    const value = hasSavedValue ? saved[question.id] : undefined;
+
+    if (question.type === "single") {
+      if (!hasSavedValue) return;
+      const radios = formEl.querySelectorAll(
+        `input[name="${escapeSelector(question.id)}"]`
+      );
+      radios.forEach((radio) => {
+        radio.checked = false;
+      });
+      if (!preserveChoiceNotes) {
+        clearChoiceNotes(question.id);
+      }
+      const choiceValue = getSavedSingleChoiceValue(value);
+      if (!choiceValue) return;
+      if (choiceValue.option !== "") {
+        const input = formEl.querySelector(
+          `input[name="${escapeSelector(question.id)}"][value="${escapeSelector(choiceValue.option)}"]`
         );
-        checkboxes.forEach((checkbox) => {
-          checkbox.checked = false;
-        });
-        if (!preserveChoiceNotes) {
-          clearChoiceNotes(question.id);
-        }
-        if (!hasSavedValue) return;
-        const choiceValues = getSavedMultiChoiceValues(value);
-        let otherValue = "";
-        choiceValues.forEach((choiceValue) => {
-          const input = formEl.querySelector(
-            `input[name="${escapeSelector(question.id)}"][value="${escapeSelector(choiceValue.option)}"]`
-          );
-          if (input) {
-            input.checked = true;
-            if (questionSupportsOptionInsights(question) && choiceValue.note) {
-              setChoiceNote(question.id, choiceValue.option, choiceValue.note);
-            }
-          } else if (choiceValue.option) {
-            otherValue = choiceValue.option;
+        if (input) {
+          input.checked = true;
+          if (questionSupportsOptionInsights(question) && choiceValue.note) {
+            setChoiceNote(question.id, choiceValue.option, choiceValue.note);
           }
-        });
-        if (otherValue) {
+        } else {
           const otherCheck = formEl.querySelector(
             `input[name="${escapeSelector(question.id)}"][value="__other__"]`
           );
@@ -3473,17 +3332,68 @@
           );
           if (otherCheck && otherInput) {
             otherCheck.checked = true;
-            otherInput.value = otherValue;
+            otherInput.value = choiceValue.option;
             otherInput.dispatchEvent(new Event("input", { bubbles: true }));
           }
         }
       }
-      if (question.type === "text" && typeof value === "string") {
-        const textarea = formEl.querySelector(
-          `textarea[data-question-id="${escapeSelector(question.id)}"]`
+      return;
+    }
+
+    if (question.type === "multi") {
+      if (!hasSavedValue) return;
+      const checkboxes = formEl.querySelectorAll(
+        `input[name="${escapeSelector(question.id)}"]`
+      );
+      checkboxes.forEach((checkbox) => {
+        checkbox.checked = false;
+      });
+      if (!preserveChoiceNotes) {
+        clearChoiceNotes(question.id);
+      }
+      const choiceValues = getSavedMultiChoiceValues(value);
+      let otherValue = "";
+      choiceValues.forEach((choiceValue) => {
+        const input = formEl.querySelector(
+          `input[name="${escapeSelector(question.id)}"][value="${escapeSelector(choiceValue.option)}"]`
+        );
+        if (input) {
+          input.checked = true;
+          if (questionSupportsOptionInsights(question) && choiceValue.note) {
+            setChoiceNote(question.id, choiceValue.option, choiceValue.note);
+          }
+        } else if (choiceValue.option) {
+          otherValue = choiceValue.option;
+        }
+      });
+      if (otherValue) {
+        const otherCheck = formEl.querySelector(
+          `input[name="${escapeSelector(question.id)}"][value="__other__"]`
         );
-        if (textarea) textarea.value = value;
+        const otherInput = formEl.querySelector(
+          `.other-input[data-question-id="${escapeSelector(question.id)}"]`
+        );
+        if (otherCheck && otherInput) {
+          otherCheck.checked = true;
+          otherInput.value = otherValue;
+          otherInput.dispatchEvent(new Event("input", { bubbles: true }));
+        }
       }
+      return;
+    }
+
+    if (question.type === "text" && hasSavedValue && typeof value === "string") {
+      const textarea = formEl.querySelector(
+        `textarea[data-question-id="${escapeSelector(question.id)}"]`
+      );
+      if (textarea) textarea.value = value;
+    }
+  }
+
+  function populateForm(saved, options = {}) {
+    if (!saved) return;
+    questions.forEach((question) => {
+      populateQuestion(question, saved, options);
     });
   }
 
@@ -3796,10 +3706,9 @@
     normalizeOptionKeysFromData();
 
     const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
-    const modKey = document.querySelector(".mod-key");
-    if (modKey) {
+    document.querySelectorAll(".mod-key").forEach((modKey) => {
       modKey.textContent = isMac ? "⌘" : "Ctrl";
-    }
+    });
     
     setText(titleEl, data.title || "Interview");
     setText(descriptionEl, data.description || "");
@@ -3893,7 +3802,7 @@
       true
     );
     submitBtn.addEventListener("keydown", (e) => {
-      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      if (isQuestionNavShortcut(e, "prev") || e.key === "ArrowUp") {
         e.preventDefault();
         e.stopImmediatePropagation();
         focusQuestion(nav.cards.length - 1, 'prev');

package/form/styles.css

@@ -232,7 +232,8 @@ body {
   border-radius: 8px;
   background: var(--bg-elevated);
   border: 1px solid var(--border-muted);
-  cursor: pointer;
+  cursor: default;
+  user-select: text;
   font-family: var(--font-body);
   font-size: var(--font-size-option);
   transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
@@ -244,6 +245,14 @@ body {
   min-width: 0;
   display: grid;
   gap: 10px;
+  cursor: text;
+  user-select: text;
+}
+
+.option-item input[type="radio"],
+.option-item input[type="checkbox"] {
+  cursor: pointer;
+  user-select: none;
 }
 
 .option-item-label {
@@ -253,6 +262,8 @@ body {
   min-height: 20px;
   min-width: 0;
   flex-wrap: wrap;
+  cursor: text;
+  user-select: text;
 }
 
 .option-item:hover {
@@ -2063,11 +2074,9 @@ button {
 }
 
 .option-insight-chip,
-.option-insight-secondary,
-.option-insight-primary,
 .option-insight-submit,
 .option-insight-advanced-toggle,
-.option-insight-unpin {
+.option-insight-remove {
   border: 1px solid var(--border-muted);
   border-radius: 999px;
   background: transparent;
@@ -2078,15 +2087,12 @@ button {
 }
 
 .option-insight-chip,
-.option-insight-secondary,
-.option-insight-primary,
 .option-insight-submit,
-.option-insight-unpin {
+.option-insight-remove {
   padding: 6px 10px;
 }
 
 .option-insight-chip.active,
-.option-insight-primary,
 .option-insight-submit {
   border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent);
   color: var(--card-accent, var(--accent));
@@ -2227,8 +2233,7 @@ button {
   50% { opacity: 1; }
 }
 
-.option-insight-actions,
-.option-insight-result-actions {
+.option-insight-actions {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
@@ -2314,7 +2319,7 @@ button {
   font-family: var(--font-mono);
 }
 
-.option-insight-unpin {
+.option-insight-remove {
   padding: 4px 8px;
 }
 
@@ -2337,8 +2342,7 @@ button {
   }
 
   .option-insight-meta-row,
-  .option-insight-actions,
-  .option-insight-result-actions {
+  .option-insight-actions {
     align-items: flex-start;
     flex-direction: column;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-interview",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "description": "Interactive interview form extension for pi coding agent",
   "author": "Nico Bailon",
   "license": "MIT",
@@ -32,6 +32,9 @@
   "scripts": {
     "test": "vitest run"
   },
+  "dependencies": {
+    "typebox": "^1.1.24"
+  },
   "pi": {
     "extensions": [
       "./index.ts"
@@ -39,8 +42,5 @@
   },
   "devDependencies": {
     "vitest": "^4.0.18"
-  },
-  "dependencies": {
-    "typebox": "^1.1.31"
   }
 }

package/server.ts

@@ -2014,107 +2014,6 @@ export async function startInterviewServer(
 				return;
 			}
 
-			if (method === "POST" && url.pathname === "/option-action") {
-				const body = await parseBodyOrRespond();
-				if (!body) return;
-				if (!validateTokenBody(body, sessionToken, res)) return;
-				if (completed) {
-					sendJson(res, 409, { ok: false, error: "Session closed" });
-					return;
-				}
-
-				const payload = body as {
-					questionId?: string;
-					optionKey?: string;
-					action?: string;
-					text?: string;
-				};
-
-				if (typeof payload.questionId !== "string") {
-					sendJson(res, 400, { ok: false, error: "Missing questionId" });
-					return;
-				}
-				if (typeof payload.optionKey !== "string") {
-					sendJson(res, 400, { ok: false, error: "Missing optionKey" });
-					return;
-				}
-				touchHeartbeat();
-
-				const questionCheck = ensureQuestionId(payload.questionId, questionById);
-				if (questionCheck.ok === false) {
-					sendJson(res, 400, { ok: false, error: questionCheck.error });
-					return;
-				}
-				const question = questionCheck.question;
-				if ((question.type !== "single" && question.type !== "multi") || !question.options) {
-					sendJson(res, 400, { ok: false, error: "Invalid question for option actions" });
-					return;
-				}
-
-				const optionIndex = getOptionIndexByKey(question, optionKeysByQuestion, payload.optionKey);
-				if (optionIndex === -1) {
-					sendJson(res, 400, { ok: false, error: "Invalid option for action" });
-					return;
-				}
-
-				const currentOptions = [...question.options];
-				const currentKeys = [...(optionKeysByQuestion[question.id] ?? [])];
-				const action = payload.action;
-				const rawText = typeof payload.text === "string" ? payload.text.trim() : "";
-
-				if (action === "move-up") {
-					if (optionIndex === 0) {
-						sendJson(res, 400, { ok: false, error: "Option is already at the top" });
-						return;
-					}
-					[currentOptions[optionIndex - 1], currentOptions[optionIndex]] = [currentOptions[optionIndex], currentOptions[optionIndex - 1]];
-					[currentKeys[optionIndex - 1], currentKeys[optionIndex]] = [currentKeys[optionIndex], currentKeys[optionIndex - 1]];
-				} else if (action === "replace-text") {
-					if (!rawText) {
-						sendJson(res, 400, { ok: false, error: "Replacement text is required" });
-						return;
-					}
-					const duplicateIndex = currentOptions.findIndex((option, index) => index !== optionIndex && getOptionLabel(option).trim().toLowerCase() === rawText.toLowerCase());
-					if (duplicateIndex !== -1) {
-						sendJson(res, 400, { ok: false, error: "An option with that text already exists" });
-						return;
-					}
-					const previousText = getOptionLabel(currentOptions[optionIndex]);
-					currentOptions[optionIndex] = setOptionLabel(currentOptions[optionIndex], rawText);
-					if (question.type === "single" && question.recommended === previousText) {
-						question.recommended = rawText;
-					} else if (question.type === "multi" && Array.isArray(question.recommended)) {
-						question.recommended = question.recommended.map((option) => option === previousText ? rawText : option);
-					}
-				} else if (action === "add-option") {
-					if (!rawText) {
-						sendJson(res, 400, { ok: false, error: "New option text is required" });
-						return;
-					}
-					if (currentOptions.some((option) => getOptionLabel(option).trim().toLowerCase() === rawText.toLowerCase())) {
-						sendJson(res, 400, { ok: false, error: "An option with that text already exists" });
-						return;
-					}
-					const newOptionKey = makeOptionKey();
-					currentOptions.splice(optionIndex + 1, 0, rawText);
-					currentKeys.splice(optionIndex + 1, 0, newOptionKey);
-				} else {
-					sendJson(res, 400, { ok: false, error: "Unsupported option action" });
-					return;
-				}
-
-				question.options = currentOptions;
-				optionKeysByQuestion[question.id] = currentKeys;
-				syncRecommendations(question, currentOptions);
-
-				sendJson(res, 200, {
-					ok: true,
-					question,
-					optionKeys: currentKeys,
-				});
-				return;
-			}
-
 			sendText(res, 404, "Not found");
 		} catch (err) {
 			const message = err instanceof Error ? err.message : "Server error";