fix: show indicator on user input request (#411)

Author: Dimillian

src/features/app/components/PinnedThreadList.test.tsx

@@ -101,4 +101,24 @@ describe("PinnedThreadList", () => {
       true,
     );
   });
+
+  it("shows blue unread-style status when a pinned thread is waiting for user input", () => {
+    const { container } = render(
+      <PinnedThreadList
+        {...baseProps}
+        rows={[{ thread: otherThread, depth: 0, workspaceId: "ws-2" }]}
+        threadStatusById={{
+          "thread-1": { isProcessing: false, hasUnread: false, isReviewing: true },
+          "thread-2": { isProcessing: true, hasUnread: false, isReviewing: false },
+        }}
+        pendingUserInputKeys={new Set(["ws-2:thread-2"])}
+      />,
+    );
+
+    const row = container.querySelector(".thread-row");
+    expect(row).toBeTruthy();
+    expect(row?.querySelector(".thread-name")?.textContent).toBe("Pinned Beta");
+    expect(row?.querySelector(".thread-status")?.className).toContain("unread");
+    expect(row?.querySelector(".thread-status")?.className).not.toContain("processing");
+  });
 });

src/features/app/components/PinnedThreadList.tsx

@@ -18,6 +18,7 @@ type PinnedThreadListProps = {
   activeWorkspaceId: string | null;
   activeThreadId: string | null;
   threadStatusById: ThreadStatusMap;
+  pendingUserInputKeys?: Set<string>;
   getThreadTime: (thread: ThreadSummary) => string | null;
   isThreadPinned: (workspaceId: string, threadId: string) => boolean;
   onSelectThread: (workspaceId: string, threadId: string) => void;
@@ -34,6 +35,7 @@ export function PinnedThreadList({
   activeWorkspaceId,
   activeThreadId,
   threadStatusById,
+  pendingUserInputKeys,
   getThreadTime,
   isThreadPinned,
   onSelectThread,
@@ -48,7 +50,12 @@ export function PinnedThreadList({
             ? ({ "--thread-indent": `${depth * 14}px` } as CSSProperties)
             : undefined;
         const status = threadStatusById[thread.id];
-        const statusClass = status?.isReviewing
+        const hasPendingUserInput = Boolean(
+          pendingUserInputKeys?.has(`${workspaceId}:${thread.id}`),
+        );
+        const statusClass = hasPendingUserInput
+          ? "unread"
+          : status?.isReviewing
           ? "reviewing"
           : status?.isProcessing
             ? "processing"

src/features/app/components/Sidebar.tsx

@@ -1,5 +1,6 @@
 import type {
   AccountSnapshot,
+  RequestUserInputRequest,
   RateLimitSnapshot,
   ThreadListSortKey,
   ThreadSummary,
@@ -66,6 +67,7 @@ type SidebarProps = {
   onRefreshAllThreads: () => void;
   activeWorkspaceId: string | null;
   activeThreadId: string | null;
+  userInputRequests?: RequestUserInputRequest[];
   accountRateLimits: RateLimitSnapshot | null;
   usageShowRemaining: boolean;
   accountInfo: AccountSnapshot | null;
@@ -122,6 +124,7 @@ export const Sidebar = memo(function Sidebar({
   onRefreshAllThreads,
   activeWorkspaceId,
   activeThreadId,
+  userInputRequests = [],
   accountRateLimits,
   usageShowRemaining,
   accountInfo,
@@ -197,6 +200,19 @@ export const Sidebar = memo(function Sidebar({
   } = getUsageLabels(accountRateLimits, usageShowRemaining);
   const debouncedQuery = useDebouncedValue(searchQuery, 150);
   const normalizedQuery = debouncedQuery.trim().toLowerCase();
+  const pendingUserInputKeys = useMemo(
+    () =>
+      new Set(
+        userInputRequests
+          .map((request) => {
+            const workspaceId = request.workspace_id.trim();
+            const threadId = request.params.thread_id.trim();
+            return workspaceId && threadId ? `${workspaceId}:${threadId}` : "";
+          })
+          .filter(Boolean),
+      ),
+    [userInputRequests],
+  );
 
   const isWorkspaceMatch = useCallback(
     (workspace: WorkspaceInfo) => {
@@ -484,6 +500,7 @@ export const Sidebar = memo(function Sidebar({
                 activeWorkspaceId={activeWorkspaceId}
                 activeThreadId={activeThreadId}
                 threadStatusById={threadStatusById}
+                pendingUserInputKeys={pendingUserInputKeys}
                 getThreadTime={getThreadTime}
                 isThreadPinned={isThreadPinned}
                 onSelectThread={onSelectThread}
@@ -635,6 +652,7 @@ export const Sidebar = memo(function Sidebar({
                           expandedWorkspaces={expandedWorkspaces}
                           activeWorkspaceId={activeWorkspaceId}
                           activeThreadId={activeThreadId}
+                          pendingUserInputKeys={pendingUserInputKeys}
                           getThreadRows={getThreadRows}
                           getThreadTime={getThreadTime}
                           isThreadPinned={isThreadPinned}
@@ -661,6 +679,7 @@ export const Sidebar = memo(function Sidebar({
                           activeWorkspaceId={activeWorkspaceId}
                           activeThreadId={activeThreadId}
                           threadStatusById={threadStatusById}
+                          pendingUserInputKeys={pendingUserInputKeys}
                           getThreadTime={getThreadTime}
                           isThreadPinned={isThreadPinned}
                           onToggleExpanded={handleToggleExpanded}

src/features/app/components/ThreadList.test.tsx

@@ -133,4 +133,23 @@ describe("ThreadList", () => {
       false,
     );
   });
+
+  it("shows blue unread-style status when a thread is waiting for user input", () => {
+    const { container } = render(
+      <ThreadList
+        {...baseProps}
+        threadStatusById={{
+          "thread-1": { isProcessing: true, hasUnread: false, isReviewing: false },
+          "thread-2": { isProcessing: false, hasUnread: false, isReviewing: false },
+        }}
+        pendingUserInputKeys={new Set(["ws-1:thread-1"])}
+      />,
+    );
+
+    const row = container.querySelector(".thread-row");
+    expect(row).toBeTruthy();
+    expect(row?.querySelector(".thread-name")?.textContent).toBe("Alpha");
+    expect(row?.querySelector(".thread-status")?.className).toContain("unread");
+    expect(row?.querySelector(".thread-status")?.className).not.toContain("processing");
+  });
 });

src/features/app/components/ThreadList.tsx

@@ -25,6 +25,7 @@ type ThreadListProps = {
   activeWorkspaceId: string | null;
   activeThreadId: string | null;
   threadStatusById: ThreadStatusMap;
+  pendingUserInputKeys?: Set<string>;
   getThreadTime: (thread: ThreadSummary) => string | null;
   isThreadPinned: (workspaceId: string, threadId: string) => boolean;
   onToggleExpanded: (workspaceId: string) => void;
@@ -51,6 +52,7 @@ export function ThreadList({
   activeWorkspaceId,
   activeThreadId,
   threadStatusById,
+  pendingUserInputKeys,
   getThreadTime,
   isThreadPinned,
   onToggleExpanded,
@@ -66,7 +68,12 @@ export function ThreadList({
         ? ({ "--thread-indent": `${depth * indentUnit}px` } as CSSProperties)
         : undefined;
     const status = threadStatusById[thread.id];
-    const statusClass = status?.isReviewing
+    const hasPendingUserInput = Boolean(
+      pendingUserInputKeys?.has(`${workspaceId}:${thread.id}`),
+    );
+    const statusClass = hasPendingUserInput
+      ? "unread"
+      : status?.isReviewing
       ? "reviewing"
       : status?.isProcessing
         ? "processing"

src/features/app/components/WorktreeSection.tsx

@@ -29,6 +29,7 @@ type WorktreeSectionProps = {
   expandedWorkspaces: Set<string>;
   activeWorkspaceId: string | null;
   activeThreadId: string | null;
+  pendingUserInputKeys?: Set<string>;
   getThreadRows: (
     threads: ThreadSummary[],
     isExpanded: boolean,
@@ -64,6 +65,7 @@ export function WorktreeSection({
   expandedWorkspaces,
   activeWorkspaceId,
   activeThreadId,
+  pendingUserInputKeys,
   getThreadRows,
   getThreadTime,
   isThreadPinned,
@@ -136,6 +138,7 @@ export function WorktreeSection({
                   activeWorkspaceId={activeWorkspaceId}
                   activeThreadId={activeThreadId}
                   threadStatusById={threadStatusById}
+                  pendingUserInputKeys={pendingUserInputKeys}
                   getThreadTime={getThreadTime}
                   isThreadPinned={isThreadPinned}
                   onToggleExpanded={onToggleExpanded}

src/features/layout/hooks/layoutNodes/buildPrimaryNodes.tsx

@@ -50,6 +50,7 @@ export function buildPrimaryNodes(options: LayoutNodesOptions): PrimaryLayoutNod
       onRefreshAllThreads={options.onRefreshAllThreads}
       activeWorkspaceId={options.activeWorkspaceId}
       activeThreadId={options.activeThreadId}
+      userInputRequests={options.userInputRequests}
       accountRateLimits={options.activeRateLimits}
       usageShowRemaining={options.usageShowRemaining}
       accountInfo={options.accountInfo}

src/features/threads/hooks/useThreadUserInputEvents.test.tsx

@@ -0,0 +1,33 @@
+// @vitest-environment jsdom
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { useThreadUserInputEvents } from "./useThreadUserInputEvents";
+
+describe("useThreadUserInputEvents", () => {
+  it("queues request user input without clearing turn state", () => {
+    const dispatch = vi.fn();
+
+    const { result } = renderHook(() =>
+      useThreadUserInputEvents({
+        dispatch,
+      }),
+    );
+
+    const request = {
+      workspace_id: "ws-1",
+      request_id: "req-1",
+      params: {
+        thread_id: "thread-1",
+        turn_id: "turn-1",
+        item_id: "item-1",
+        questions: [],
+      },
+    };
+
+    act(() => {
+      result.current(request);
+    });
+
+    expect(dispatch).toHaveBeenCalledWith({ type: "addUserInputRequest", request });
+  });
+});