pi-interview 0.8.0 → 0.8.1

package/form/script.js

@@ -738,6 +738,12 @@
     return askModels[0]?.provider || "";
   }
 
+  const ASK_DEPTH_OPTIONS = [
+    { key: "quick", label: "Quick" },
+    { key: "standard", label: "Standard" },
+    { key: "deep", label: "Deep" },
+  ];
+
   function createDefaultActiveInsight(questionId, optionKey) {
     const selectedModel = askModels.some((model) => model.value === defaultAskModel)
       ? defaultAskModel
@@ -754,6 +760,7 @@
       advancedOpen: false,
       selectedProvider: parsed.provider || getFirstProvider(),
       selectedModel,
+      selectedDepth: "standard",
       abortController: null,
     };
   }
@@ -1021,6 +1028,7 @@
           optionKey,
           prompt,
           model: modelOverride && modelOverride !== defaultAskModel ? modelOverride : null,
+          depth: active.selectedDepth || "standard",
         }),
         signal: active.abortController.signal,
       });
@@ -1180,22 +1188,27 @@
     const metaRow = document.createElement("div");
     metaRow.className = "option-insight-meta-row";
 
-    const model = document.createElement("div");
-    model.className = "option-insight-model";
-    model.textContent = getInsightModelLabel(active);
-    metaRow.appendChild(model);
-
-    const advancedToggle = document.createElement("button");
-    advancedToggle.type = "button";
-    advancedToggle.className = "option-insight-advanced-toggle";
-    advancedToggle.textContent = active.advancedOpen ? "Advanced model settings ▾" : "Advanced model settings ▸";
-    advancedToggle.addEventListener("click", (event) => {
+    const modelBadge = document.createElement("button");
+    modelBadge.type = "button";
+    modelBadge.className = "option-insight-model-badge";
+    const badgeLabel = document.createElement("span");
+    badgeLabel.className = "badge-label";
+    badgeLabel.textContent = "Model";
+    const badgeValue = document.createElement("span");
+    badgeValue.textContent = getInsightModelLabel(active);
+    const badgeCaret = document.createElement("span");
+    badgeCaret.className = "badge-caret";
+    badgeCaret.textContent = active.advancedOpen ? "▾" : "▸";
+    modelBadge.appendChild(badgeLabel);
+    modelBadge.appendChild(badgeValue);
+    modelBadge.appendChild(badgeCaret);
+    modelBadge.addEventListener("click", (event) => {
       event.preventDefault();
       event.stopPropagation();
       active.advancedOpen = !active.advancedOpen;
       replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
     });
-    metaRow.appendChild(advancedToggle);
+    metaRow.appendChild(modelBadge);
 
     panel.appendChild(metaRow);
 
@@ -1203,38 +1216,63 @@
       const advanced = document.createElement("div");
       advanced.className = "option-insight-advanced";
 
-      const providerSelect = document.createElement("select");
-      providerSelect.className = "option-insight-select";
       const providers = [...new Set(askModels.map((model) => model.provider))];
+      const providerRow = document.createElement("div");
+      providerRow.className = "option-insight-provider-row";
       providers.forEach((provider) => {
-        const option = document.createElement("option");
-        option.value = provider;
-        option.textContent = providerLabel(provider);
-        providerSelect.appendChild(option);
-      });
-      providerSelect.value = active.selectedProvider || providers[0] || "";
-      providerSelect.addEventListener("change", () => {
-        active.selectedProvider = providerSelect.value;
-        const providerModels = getModelsForProvider(active.selectedProvider);
-        active.selectedModel = providerModels[0]?.value || null;
-        replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        const isSelected = (active.selectedProvider || providers[0] || "") === provider;
+        btn.className = "option-insight-provider-btn" + (isSelected ? " is-selected" : "");
+        btn.textContent = providerLabel(provider);
+        btn.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          active.selectedProvider = provider;
+          const providerModels = getModelsForProvider(provider);
+          active.selectedModel = providerModels[0]?.value || null;
+          replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
+        });
+        providerRow.appendChild(btn);
       });
-      advanced.appendChild(providerSelect);
+      advanced.appendChild(providerRow);
 
-      const modelSelect = document.createElement("select");
-      modelSelect.className = "option-insight-select";
       const providerModels = getModelsForProvider(active.selectedProvider);
+      const modelRow = document.createElement("div");
+      modelRow.className = "option-insight-model-row";
       providerModels.forEach((modelOption) => {
-        const option = document.createElement("option");
-        option.value = modelOption.value;
-        option.textContent = modelOption.label;
-        modelSelect.appendChild(option);
+        const btn = document.createElement("button");
+        btn.type = "button";
+        const isSelected = active.selectedModel === modelOption.value;
+        btn.className = "option-insight-model-btn" + (isSelected ? " is-selected" : "");
+        btn.textContent = modelOption.label;
+        btn.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          active.selectedModel = modelOption.value;
+          replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
+        });
+        modelRow.appendChild(btn);
       });
-      modelSelect.value = active.selectedModel || providerModels[0]?.value || "";
-      modelSelect.addEventListener("change", () => {
-        active.selectedModel = modelSelect.value;
+      advanced.appendChild(modelRow);
+
+      const depthRow = document.createElement("div");
+      depthRow.className = "option-insight-depth-row";
+      ASK_DEPTH_OPTIONS.forEach((depth) => {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        const isSelected = active.selectedDepth === depth.key;
+        btn.className = "option-insight-depth-btn" + (isSelected ? " is-selected" : "");
+        btn.textContent = depth.label;
+        btn.addEventListener("click", (event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          active.selectedDepth = depth.key;
+          replaceQuestionOptionList(question, getQuestionValue(question), optionKey);
+        });
+        depthRow.appendChild(btn);
       });
-      advanced.appendChild(modelSelect);
+      advanced.appendChild(depthRow);
 
       panel.appendChild(advanced);
     }
@@ -1255,6 +1293,20 @@
 
     panel.appendChild(actions);
 
+    if (active.loading && !active.result) {
+      const loading = document.createElement("div");
+      loading.className = "option-insight-loading";
+      const spinner = document.createElement("span");
+      spinner.className = "option-insight-spinner";
+      spinner.textContent = "Thinking";
+      loading.appendChild(spinner);
+      const dots = document.createElement("span");
+      dots.className = "option-insight-dots";
+      dots.textContent = "...";
+      loading.appendChild(dots);
+      panel.appendChild(loading);
+    }
+
     if (active.error) {
       const error = document.createElement("div");
       error.className = "option-insight-error";

package/form/styles.css

@@ -2018,7 +2018,6 @@ button {
 
 .option-insight-meta-row {
   display: flex;
-  justify-content: space-between;
   align-items: center;
   gap: 10px;
 }
@@ -2029,6 +2028,39 @@ button {
   color: var(--fg-muted);
 }
 
+.option-insight-model-badge {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 5px 12px;
+  border-radius: 999px;
+  border: 1px solid var(--border-muted);
+  background: var(--bg-elevated);
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.option-insight-model-badge:hover {
+  color: var(--fg);
+  border-color: var(--card-accent, var(--accent));
+  background: color-mix(in srgb, var(--card-accent, var(--accent)) 8%, var(--bg-elevated));
+}
+
+.option-insight-model-badge .badge-caret {
+  font-size: 14px;
+  opacity: 0.85;
+  line-height: 1;
+}
+
+.option-insight-model-badge .badge-label {
+  font-weight: 500;
+  opacity: 0.55;
+}
+
 .option-insight-chips {
   display: flex;
   flex-wrap: wrap;
@@ -2066,8 +2098,7 @@ button {
   background: color-mix(in srgb, var(--card-accent, var(--accent)) 10%, transparent);
 }
 
-.option-insight-input,
-.option-insight-select {
+.option-insight-input {
   width: 100%;
   border: 1px solid var(--border-muted);
   border-radius: 12px;
@@ -2076,23 +2107,129 @@ button {
   color: var(--fg);
   font-family: var(--font-body);
   font-size: 13px;
-}
-
-.option-insight-input {
   min-height: 72px;
   resize: vertical;
 }
 
-.option-insight-advanced-toggle {
-  padding: 0;
-  border: none;
+.option-insight-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.option-insight-provider-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.option-insight-provider-btn {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-muted);
+  background: transparent;
   color: var(--fg-muted);
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
 }
 
-.option-insight-advanced {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
+.option-insight-provider-btn:hover {
+  color: var(--fg);
+  border-color: var(--accent);
+}
+
+.option-insight-provider-btn.is-selected {
+  box-shadow: inset 0 -2px 0 0 var(--card-accent, var(--accent));
+  border-color: var(--card-accent, var(--accent));
+  color: var(--card-accent, var(--accent));
+}
+
+.option-insight-model-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.option-insight-model-btn {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-muted);
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+
+.option-insight-model-btn:hover {
+  color: var(--fg);
+  border-color: var(--accent);
+}
+
+.option-insight-model-btn.is-selected {
+  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent);
+  color: var(--card-accent, var(--accent));
+  background: color-mix(in srgb, var(--card-accent, var(--accent)) 10%, transparent);
+}
+
+.option-insight-depth-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--border-muted);
+}
+
+.option-insight-depth-btn {
+  font-family: var(--font-body);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border-muted);
+  background: transparent;
+  color: var(--fg-muted);
+  cursor: pointer;
+  transition: border-color 0.12s, background 0.12s, color 0.12s;
+}
+
+.option-insight-depth-btn:hover {
+  color: var(--fg);
+  border-color: var(--accent);
+}
+
+.option-insight-depth-btn.is-selected {
+  box-shadow: inset 0 -2px 0 0 var(--card-accent, var(--accent));
+  border-color: var(--card-accent, var(--accent));
+  color: var(--card-accent, var(--accent));
+}
+
+.option-insight-loading {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 0;
+  font-size: 13px;
+  color: var(--fg-muted);
+}
+
+.option-insight-spinner {
+  font-weight: 600;
+  color: var(--card-accent, var(--accent));
+}
+
+.option-insight-dots {
+  animation: option-insight-pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes option-insight-pulse {
+  0%, 100% { opacity: 0.3; }
+  50% { opacity: 1; }
 }
 
 .option-insight-actions,
@@ -2210,10 +2347,6 @@ button {
     align-items: flex-start;
     flex-direction: column;
   }
-
-  .option-insight-advanced {
-    grid-template-columns: 1fr;
-  }
 }
 
 /* Side-by-side layout */

package/index.ts

@@ -302,8 +302,9 @@ export function selectGenerateModels<T extends GenerateModelCandidate>(
 	return { primary: availableModels[0] ?? null, fallback: null };
 }
 
-function buildAskModelsData(
+export function buildAskModelsData(
 	availableModels: Model<Api>[],
+	currentModel: Model<Api> | null,
 	primaryModel: Model<Api> | null,
 	fallbackModel: Model<Api> | null,
 ): AskModelOption[] {
@@ -321,16 +322,15 @@ function buildAskModelsData(
 		});
 	};
 
+	addModel(currentModel);
 	addModel(primaryModel);
 	addModel(fallbackModel);
-	for (const model of availableModels) {
-		addModel(model);
+	for (const modelRef of PREFERRED_GENERATE_MODELS) {
+		const preferredModel = findModelByRef(availableModels, modelRef);
+		addModel(preferredModel);
 	}
 
-	return models.sort((a, b) => {
-		if (a.provider !== b.provider) return a.provider.localeCompare(b.provider);
-		return a.label.localeCompare(b.label);
-	});
+	return models;
 }
 
 export function extractGenerateResponseText(
@@ -815,7 +815,7 @@ export default function (pi: ExtensionAPI) {
 				ctx.model ?? null,
 				availableGenerateModels,
 			);
-			const askModels = buildAskModelsData(availableGenerateModels, generateModel, fallbackGenerateModel);
+			const askModels = buildAskModelsData(availableGenerateModels, ctx.model ?? null, generateModel, fallbackGenerateModel);
 			const defaultAskModel = generateModel ? formatModelRef(generateModel) : null;
 
 			// Expand ~ in snapshotDir if present
@@ -1112,15 +1112,21 @@ export default function (pi: ExtensionAPI) {
 						return selectedModel;
 					};
 
-					onOptionInsight = async (questionId, option, prompt, modelOverride, generateSignal) => {
+					onOptionInsight = async (questionId, option, prompt, modelOverride, depth, generateSignal) => {
 						const question = questionsData.questions.find((q) => q.id === questionId);
 						if (!question) throw new Error(`Unknown question: ${questionId}`);
 						const optionText = getOptionLabel(option);
 						const optionContent = typeof option === "string" ? null : option.content;
 
+						const depthInstructions = {
+							quick: "Keep the analysis very brief: a one-sentence summary and at most one bullet point.",
+							standard: "Be concrete and concise. A short summary and a few bullet points.",
+							deep: "Provide a thorough analysis: detailed summary, multiple bullet points covering tradeoffs, risks, and edge cases.",
+						};
+
 						const questionPrompt = [
 							"Analyze this single interview answer option.",
-							"Be concrete and concise.",
+							depthInstructions[depth as keyof typeof depthInstructions] || depthInstructions.standard,
 							"Explain what is good or risky about the option, and suggest a rewrite only if it would materially improve clarity.",
 							"Return ONLY JSON with summary, bullets, and optional suggestedText.",
 							"",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-interview",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Interactive interview form extension for pi coding agent",
   "author": "Nico Bailon",
   "license": "MIT",

package/server.ts

@@ -250,6 +250,7 @@ export interface InterviewServerCallbacks {
 		option: OptionValue,
 		prompt: string,
 		modelOverride: string | null,
+		depth: string,
 		signal: AbortSignal,
 	) => Promise<OptionInsightResult>;
 }
@@ -1932,6 +1933,7 @@ export async function startInterviewServer(
 					optionKey?: string;
 					prompt?: string;
 					model?: string | null;
+					depth?: string;
 				};
 
 				if (typeof payload.questionId !== "string") {
@@ -1973,6 +1975,7 @@ export async function startInterviewServer(
 						option,
 						payload.prompt.trim(),
 						typeof payload.model === "string" ? payload.model : null,
+						typeof payload.depth === "string" ? payload.depth : "standard",
 						controller.signal,
 					);
 					sendJson(res, 200, { ok: true, optionText, ...result });