pi-interview 0.8.4 → 0.8.6

package/form/script.js

@@ -930,7 +930,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);
     }
@@ -3395,76 +3395,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 +3431,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);
     });
   }
 

package/form/styles.css

@@ -356,22 +356,17 @@ input[type="checkbox"] {
 
 input[type="radio"] {
   border-radius: 50%;
+  background-image: radial-gradient(circle, var(--accent) 0 45%, transparent 55%);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 0 0;
+  transition: background-size 120ms ease-out, border-color 120ms ease-out;
 }
 
 input[type="checkbox"] {
   border-radius: 3px;
 }
 
-input[type="radio"]::before {
-  content: "";
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  transform: scale(0);
-  background: var(--accent);
-  transition: transform 120ms ease-out;
-}
-
 input[type="checkbox"]::before {
   content: "";
   width: 9px;
@@ -382,13 +377,13 @@ input[type="checkbox"]::before {
   transition: transform 120ms ease-out;
 }
 
-input[type="radio"]:checked::before,
-input[type="checkbox"]:checked::before {
-  transform: rotate(-45deg) scale(1);
+input[type="radio"]:checked {
+  border-color: var(--accent);
+  background-size: 8px 8px;
 }
 
-input[type="radio"]:checked::before {
-  transform: scale(1);
+input[type="checkbox"]:checked::before {
+  transform: rotate(-45deg) scale(1);
 }
 
 input[type="radio"]:focus-visible,

package/index.ts

@@ -1,4 +1,4 @@
-import { Type } from "@sinclair/typebox";
+import { Type } from "typebox";
 import { StringEnum, complete, type Api, type AssistantMessage, type Model } from "@mariozechner/pi-ai";
 import { Text } from "@mariozechner/pi-tui";
 import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-interview",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "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"