@hienlh/ppm 0.23.15 → 0.23.17

package/src/web/components/chat/message-events.tsx

@@ -12,6 +12,8 @@ import type { SessionPhase } from "../../../types/api";
 import type { BashPartialEntry } from "../../hooks/use-chat";
 import { ToolCard } from "./tool-cards";
 import { MarkdownContent } from "./message-markdown";
+import { AsyncQuestionCard } from "./async-question-card";
+import { ASYNC_QUESTION_TOOL, type ChatQuestion } from "../../../shared/chat-questions";
 
 /**
  * Renders events in order — consecutive text events merged into one bubble,
@@ -163,6 +165,10 @@ export function InterleavedEvents({ events, isStreaming, projectName, bashPartia
             </div>
           );
         }
+        if (group.tool.type === "tool_use" && group.tool.tool === ASYNC_QUESTION_TOOL && !group.tool.parentToolUseId) {
+          const input = group.tool.input as { questions: ChatQuestion[] };
+          return <AsyncQuestionCard key={group.tool.toolUseId} itemId={group.tool.toolUseId!} questions={input.questions} />;
+        }
         return <ToolCard key={`tool-${i}`} tool={group.tool} result={group.result} completed={group.completed} projectName={projectName} bashPartialOutput={bashPartialOutput} />;
       })}
     </>

package/src/web/components/chat/question-card.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import type { ChatQuestion } from "../../../shared/chat-questions";
 
 /* ── Types ── */
 export interface QuestionOption {
@@ -6,17 +7,13 @@ export interface QuestionOption {
   description?: string;
 }
 
-export interface Question {
-  question: string;
-  header?: string;
-  options: QuestionOption[];
-  multiSelect?: boolean;
-}
+export type Question = ChatQuestion;
 
 interface QuestionCardProps {
   questions: Question[];
   onSubmit: (answers: Record<string, string>) => void;
   onSkip: () => void;
+  autoFocus?: boolean;
 }
 
 /* ── Hook: form state ── */
@@ -81,6 +78,7 @@ function useQuestionKeyboard(config: {
   onSubmit: () => void;
   customInputRef: React.RefObject<HTMLInputElement | null>;
   enabled: boolean;
+  autoFocus: boolean;
 }) {
   const [focusedOption, setFocusedOption] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -139,7 +137,7 @@ function useQuestionKeyboard(config: {
       // Same reason: asking the main document whether focus is already inside the card answers
       // "no" for a card living in another document, and this effect re-runs on every render —
       // which would yank focus out of the custom input after each keystroke.
-      if (!el.contains(el.ownerDocument.activeElement)) el.focus();
+      if (config.autoFocus && !el.contains(el.ownerDocument.activeElement)) el.focus();
     }
     return () => { el?.removeEventListener("keydown", handleKeyDown); };
   }, [config, focusedOption]);
@@ -148,7 +146,7 @@ function useQuestionKeyboard(config: {
 }
 
 /* ── Component ── */
-export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps) {
+export function QuestionCard({ questions, onSubmit, onSkip, autoFocus = true }: QuestionCardProps) {
   const customInputRef = useRef<HTMLInputElement>(null);
   const form = useQuestionForm(questions);
   const currentQ = questions[form.activeTab];
@@ -158,7 +156,7 @@ export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps)
   const handleSubmit = useCallback(() => {
     if (!form.allAnswered) return;
     const result: Record<string, string> = {};
-    questions.forEach((q, i) => { result[q.question] = form.getFinalAnswer(i); });
+    questions.forEach((q, i) => { result[q.id ?? q.question] = form.getFinalAnswer(i); });
     onSubmit(result);
   }, [form.allAnswered, form.getFinalAnswer, questions, onSubmit]);
 
@@ -182,7 +180,7 @@ export function QuestionCard({ questions, onSubmit, onSkip }: QuestionCardProps)
     allAnswered: form.allAnswered, hasAnswer: form.hasAnswer,
     onSelectOption: handleSelectOption,
     goToNextTab: form.goToNextTab, goToPrevTab: form.goToPrevTab,
-    onSubmit: handleSubmit, customInputRef, enabled: true,
+    onSubmit: handleSubmit, customInputRef, enabled: true, autoFocus,
   });
 
   const selectWithFocus = useCallback(

package/src/web/components/chat/tool-cards.tsx

@@ -626,7 +626,7 @@ function ToolDetails({
         </div>
       );
     case "AskUserQuestion": {
-      const qs = (input.questions as Array<{ question: string; header?: string; options: Array<{ label: string; description?: string }>; multiSelect?: boolean }>) ?? [];
+      const qs = (input.questions as Array<{ id?: string; question: string; header?: string; options: Array<{ label: string; description?: string }>; multiSelect?: boolean }>) ?? [];
       const answers = (input.answers as Record<string, string>) ?? {};
       return (
         <div className="space-y-2">
@@ -635,7 +635,7 @@ function ToolDetails({
               <p className="text-text-primary font-medium">{q.header ? `${q.header}: ` : ""}{q.question}</p>
               <div className="flex flex-wrap gap-1">
                 {q.options.map((opt, oi) => {
-                  const answer = answers[q.question] ?? "";
+                  const answer = answers[q.id ?? q.question] ?? answers[q.question] ?? "";
                   const isSelected = answer.split(", ").includes(opt.label);
                   return (
                     <span key={oi} className={`inline-block rounded px-1.5 py-0.5 text-xs border ${
@@ -646,8 +646,8 @@ function ToolDetails({
                   );
                 })}
               </div>
-              {answers[q.question] && (
-                <p className="text-foreground text-xs">Answer: {answers[q.question]}</p>
+              {(answers[q.id ?? q.question] ?? answers[q.question]) && (
+                <p className="text-foreground text-xs">Answer: {answers[q.id ?? q.question] ?? answers[q.question]}</p>
               )}
             </div>
           ))}

package/src/web/hooks/use-reconnect-indicator.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from "react";
+
+/** What the chat shows while its socket is being re-established. */
+export type ReconnectStage = "hidden" | "reconnecting" | "lost";
+
+/** A reconnect that lands within this window is never shown — returning to the app should not flash. */
+export const RECONNECT_SHOW_DELAY_MS = 800;
+/** Past this the connection is reported lost and a retry is offered. */
+export const RECONNECT_LOST_AFTER_MS = 8_000;
+
+/**
+ * Turns a raw `isReconnecting` flag into what is worth telling the user.
+ *
+ * A phone browser closes the socket of every page it sends to the background, so a
+ * reconnect follows almost every return to PPM and usually finishes in well under a
+ * second. Both timers restart whenever the page becomes visible again: timers frozen
+ * while the page was hidden fire as soon as it resumes, which would otherwise report
+ * a connection that started reconnecting a moment ago as lost.
+ */
+export function useReconnectIndicator(
+  isReconnecting: boolean,
+  showDelayMs = RECONNECT_SHOW_DELAY_MS,
+  lostAfterMs = RECONNECT_LOST_AFTER_MS,
+): { stage: ReconnectStage; restart: () => void } {
+  const [stage, setStage] = useState<ReconnectStage>("hidden");
+  const [epoch, setEpoch] = useState(0);
+  const restart = useCallback(() => setEpoch((n) => n + 1), []);
+
+  useEffect(() => {
+    const onVisibility = () => {
+      if (document.visibilityState === "visible") restart();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [restart]);
+
+  useEffect(() => {
+    setStage("hidden");
+    if (!isReconnecting) return;
+    const show = setTimeout(() => setStage("reconnecting"), showDelayMs);
+    const lost = setTimeout(() => setStage("lost"), lostAfterMs);
+    return () => {
+      clearTimeout(show);
+      clearTimeout(lost);
+    };
+  }, [isReconnecting, showDelayMs, lostAfterMs, epoch]);
+
+  return { stage, restart };
+}