feat(twig): add permission indicator to sidebar task items (#605)

Author: jonathanlab

apps/twig/src/renderer/features/sidebar/components/HistoryView.tsx

@@ -58,6 +58,7 @@ function HistoryTaskItem({
       isGenerating={task.isGenerating}
       isUnread={task.isUnread}
       isPinned={task.isPinned}
+      needsPermission={task.needsPermission}
       onClick={onClick}
       onContextMenu={onContextMenu}
       onDelete={onDelete}
@@ -97,6 +98,7 @@ function PinnedTaskItem({
       isGenerating={task.isGenerating}
       isUnread={task.isUnread}
       isPinned={task.isPinned}
+      needsPermission={task.needsPermission}
       onClick={onClick}
       onContextMenu={onContextMenu}
       onDelete={onDelete}

apps/twig/src/renderer/features/sidebar/components/SidebarMenu.tsx

@@ -6,7 +6,7 @@ import { useTaskContextMenu } from "@hooks/useTaskContextMenu";
 import { Box, Flex } from "@radix-ui/themes";
 import type { Task } from "@shared/types";
 import { useNavigationStore } from "@stores/navigationStore";
-import { memo } from "react";
+import { memo, useEffect, useRef } from "react";
 import { useWorkspaceStore } from "@/renderer/features/workspace/stores/workspaceStore";
 import { useSidebarData } from "../hooks/useSidebarData";
 import { usePinnedTasksStore } from "../stores/pinnedTasksStore";
@@ -35,6 +35,22 @@ function SidebarMenuComponent() {
     currentUser,
   });
 
+  const previousTaskIdRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    const currentTaskId =
+      view.type === "task-detail" && view.data ? view.data.id : null;
+
+    if (
+      previousTaskIdRef.current &&
+      previousTaskIdRef.current !== currentTaskId
+    ) {
+      markAsViewed(previousTaskIdRef.current);
+    }
+
+    previousTaskIdRef.current = currentTaskId;
+  }, [view, markAsViewed]);
+
   const taskMap = new Map<string, Task>();
   for (const task of allTasks) {
     taskMap.set(task.id, task);
@@ -47,7 +63,6 @@ function SidebarMenuComponent() {
   const handleTaskClick = (taskId: string) => {
     const task = taskMap.get(taskId);
     if (task) {
-      markAsViewed(taskId);
       navigateToTask(task);
     }
   };

apps/twig/src/renderer/features/sidebar/components/items/TaskItem.tsx

@@ -1,5 +1,6 @@
 import { DotsCircleSpinner } from "@components/DotsCircleSpinner";
 import {
+  BellRinging,
   Cloud,
   GitBranch as GitBranchIcon,
   Laptop as LaptopIcon,
@@ -28,6 +29,7 @@ interface TaskItemProps {
   isGenerating?: boolean;
   isUnread?: boolean;
   isPinned?: boolean;
+  needsPermission?: boolean;
   onClick: () => void;
   onContextMenu: (e: React.MouseEvent) => void;
   onDelete?: () => void;
@@ -152,6 +154,7 @@ export function TaskItem({
   isGenerating,
   isUnread,
   isPinned = false,
+  needsPermission = false,
   onClick,
   onContextMenu,
   onDelete,
@@ -163,18 +166,24 @@ export function TaskItem({
 
   const isCloudTask = workspaceMode === "cloud";
 
-  const activityText = isGenerating
-    ? "Generating..."
-    : lastActivityAt
-      ? formatRelativeTime(lastActivityAt)
-      : undefined;
+  const activityText = needsPermission
+    ? "Needs permission"
+    : isGenerating
+      ? "Generating..."
+      : lastActivityAt
+        ? formatRelativeTime(lastActivityAt)
+        : undefined;
 
   const repoName = mainRepoPath?.split("/").pop();
   const subtitle = (
     <span className="flex items-center gap-1">
       {repoName && <span>{repoName}</span>}
       {repoName && activityText && <span>·</span>}
-      {activityText && <span>{activityText}</span>}
+      {activityText && (
+        <span className={needsPermission ? "text-blue-11" : ""}>
+          {activityText}
+        </span>
+      )}
       {!isCloudTask && <DiffStatsDisplay taskId={id} />}
     </span>
   );
@@ -187,7 +196,9 @@ export function TaskItem({
       ? "Workspace"
       : "Local";
 
-  const icon = isGenerating ? (
+  const icon = needsPermission ? (
+    <BellRinging size={16} className="text-blue-11" />
+  ) : isGenerating ? (
     <DotsCircleSpinner size={16} className="text-accent-11" />
   ) : isUnread ? (
     <span className="flex h-4 w-4 items-center justify-center text-[8px] text-green-11">

apps/twig/src/renderer/features/sidebar/hooks/useSidebarData.ts

@@ -44,6 +44,7 @@ export interface TaskData {
   isGenerating?: boolean;
   isUnread?: boolean;
   isPinned?: boolean;
+  needsPermission?: boolean;
 }
 
 export interface HistoryTaskData extends TaskData {
@@ -196,7 +197,7 @@ function buildHistoryData(
   lastViewedAt: Record<string, number>,
   localActivityAt: Record<string, number>,
   pinnedTaskIds: Set<string>,
-  activeTaskId: string | null,
+  _activeTaskId: string | null,
   visibleCount: number,
 ): HistoryData {
   const getSessionForTask = (taskId: string): AgentSession | undefined => {
@@ -218,11 +219,8 @@ function buildHistoryData(
       : apiUpdatedAt;
 
     const taskLastViewedAt = lastViewedAt[task.id];
-    const isCurrentlyViewing = activeTaskId === task.id;
     const isUnread =
-      !isCurrentlyViewing &&
-      taskLastViewedAt !== undefined &&
-      lastActivityAt > taskLastViewedAt;
+      taskLastViewedAt !== undefined && lastActivityAt > taskLastViewedAt;
 
     return {
       id: task.id,
@@ -232,20 +230,21 @@ function buildHistoryData(
       isGenerating: session?.isPromptPending ?? false,
       isUnread,
       isPinned: pinnedTaskIds.has(task.id),
+      needsPermission: (session?.pendingPermissions?.size ?? 0) > 0,
       folderName: folder?.name,
     };
   });
 
   // Filter out pinned tasks - they will be shown in their own section
   const unpinnedTasks = historyTasks.filter((t) => !pinnedTaskIds.has(t.id));
 
-  // Partition into active (unread) and inactive tasks
+  // Partition into active (unread or needs permission) and inactive tasks
   const activeTasks = unpinnedTasks
-    .filter((t) => t.isUnread)
+    .filter((t) => t.isUnread || t.needsPermission)
     .sort((a, b) => (b.lastActivityAt ?? 0) - (a.lastActivityAt ?? 0));
 
   const inactiveTasks = unpinnedTasks
-    .filter((t) => !t.isUnread)
+    .filter((t) => !t.isUnread && !t.needsPermission)
     .sort((a, b) => b.createdAt - a.createdAt);
 
   // Apply pagination to inactive tasks only (active always shown)
@@ -267,7 +266,7 @@ function buildPinnedData(
   lastViewedAt: Record<string, number>,
   localActivityAt: Record<string, number>,
   pinnedTaskIds: Set<string>,
-  activeTaskId: string | null,
+  _activeTaskId: string | null,
 ): PinnedData {
   const getSessionForTask = (taskId: string): AgentSession | undefined => {
     return Object.values(sessions).find((s) => s.taskId === taskId);
@@ -287,11 +286,8 @@ function buildPinnedData(
       : apiUpdatedAt;
 
     const taskLastViewedAt = lastViewedAt[task.id];
-    const isCurrentlyViewing = activeTaskId === task.id;
     const isUnread =
-      !isCurrentlyViewing &&
-      taskLastViewedAt !== undefined &&
-      lastActivityAt > taskLastViewedAt;
+      taskLastViewedAt !== undefined && lastActivityAt > taskLastViewedAt;
 
     return {
       id: task.id,
@@ -300,6 +296,7 @@ function buildPinnedData(
       isGenerating: session?.isPromptPending ?? false,
       isUnread,
       isPinned: true,
+      needsPermission: (session?.pendingPermissions?.size ?? 0) > 0,
     };
   });
 
@@ -370,7 +367,6 @@ export function useSidebarData({
 
       const tasksWithActivity = folderTasks.map((task) => {
         const session = getSessionForTask(task.id);
-        // Use max of task.updated_at and local activity timestamp for accurate ordering
         const apiUpdatedAt = new Date(task.updated_at).getTime();
         const localActivity = localActivityAt[task.id];
         const lastActivityAt = localActivity
@@ -382,6 +378,7 @@ export function useSidebarData({
           lastActivityAt,
           isGenerating: session?.isPromptPending ?? false,
           isPinned,
+          needsPermission: (session?.pendingPermissions?.size ?? 0) > 0,
         };
       });
 
@@ -399,12 +396,15 @@ export function useSidebarData({
         name: folder.name,
         path: folder.path,
         tasks: tasksWithActivity.map(
-          ({ task, lastActivityAt, isGenerating, isPinned }) => {
+          ({
+            task,
+            lastActivityAt,
+            isGenerating,
+            isPinned,
+            needsPermission,
+          }) => {
             const taskLastViewedAt = lastViewedAt[task.id];
-            const isCurrentlyViewing = activeTaskId === task.id;
-            // Only show unread if: user has viewed it before AND there's new activity since
             const isUnread =
-              !isCurrentlyViewing &&
               taskLastViewedAt !== undefined &&
               lastActivityAt > taskLastViewedAt;
 
@@ -415,6 +415,7 @@ export function useSidebarData({
               isGenerating,
               isUnread,
               isPinned,
+              needsPermission,
             };
           },
         ),
@@ -427,7 +428,6 @@ export function useSidebarData({
     localActivityAt,
     pinnedTaskIds,
     lastViewedAt,
-    activeTaskId,
   ]);
 
   const historyData = useMemo(