Commit 03e135577cbf861c2948981601c070dab038ea11 | the-knife

author	maria <maria@kuuro.net> 2026-09-12 18:38:07-03:00
committer	GitHub <noreply@github.com> 2026-09-12 18:38:07-03:00
log	03e135577cbf861c2948981601c070dab038ea11
tree	1625618af5c9f2ac166874a6f9cbbb563844d408
parent	cfeaca41ae27bdf2c203158d378c87c7308fea2a
signature	Signed by PGP key B5690EEEBB952194

fix(web): complete thread status icons and keep input threads prominent (#11461)

Co-authored-by: maria-rcks <254055478+maria-rcks@users.noreply.github.com>

3 files changed, 33 insertions(+), 19 deletions(-)

apps
- web
  - src
    components
    Sidebar.logic.test.ts
    Sidebar.logic.ts
    Sidebar.tsx

apps/web/src/components/Sidebar.logic.test.ts+12

...	@@ -395,6 +395,18 @@ describe("shouldRecedeSidebarThread", () => {	...	@@ -395,6 +395,18 @@ describe("shouldRecedeSidebarThread", () => {
395	expect(shouldRecedeSidebarThread({ ...input, isActive: true })).toBe(false);	395	expect(shouldRecedeSidebarThread({ ...input, isActive: true })).toBe(false);
396	expect(shouldRecedeSidebarThread({ ...input, isSelected: true })).toBe(false);	396	expect(shouldRecedeSidebarThread({ ...input, isSelected: true })).toBe(false);
397	});	397	});
		398
		399	it.each([false, true])("keeps input-required threads prominent with unread=%s", (isUnread) => {
		400	expect(
		401	shouldRecedeSidebarThread({
		402	status: "input",
		403	isUnread,
		404	isWoke: false,
		405	isActive: false,
		406	isSelected: false,
		407	}),
		408	).toBe(false);
		409	});
398	});	410	});
399		411
400	describe("createThreadJumpHintVisibilityController", () => {	412	describe("createThreadJumpHintVisibilityController", () => {

apps/web/src/components/Sidebar.logic.ts+2-2

...	@@ -803,9 +803,9 @@ export function shouldRecedeSidebarThread(input: {	...	@@ -803,9 +803,9 @@ export function shouldRecedeSidebarThread(input: {
803	isActive: boolean;	803	isActive: boolean;
804	isSelected: boolean;	804	isSelected: boolean;
805	}): boolean {	805	}): boolean {
806	if (input.isActive \|\| input.isSelected) return false;	806	if (input.isActive \|\| input.isSelected \|\| input.status === "input") return false;
807	if (input.status === "working" \|\| input.status === "monitoring") return true;	807	if (input.status === "working" \|\| input.status === "monitoring") return true;
808	if (input.status === "ready" \|\| input.status === "approval" \|\| input.status === "input") {	808	if (input.status === "ready" \|\| input.status === "approval") {
809	return !input.isUnread && !input.isWoke;	809	return !input.isUnread && !input.isWoke;
810	}	810	}
811	return false;	811	return false;

apps/web/src/components/Sidebar.tsx+19-17

 @@ -45,12 +45,15 @@ import {
   CircleCheckIcon,
   CircleDashedIcon,
   ClockIcon,
+  EyeIcon,
   FolderIcon,
   GitBranchIcon,
+  MessageCircleQuestionIcon,
   PinIcon,
   PinOffIcon,
   PlusIcon,
   SettingsIcon,
+  ShieldQuestionIcon,
   SquarePenIcon,
   TerminalIcon,
   Undo2Icon,
 @@ -1088,8 +1091,6 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
   // switching sidebars must not light up every historical thread as unread.
   const isUnread = hasUnseenCompletion({ ...thread, lastVisitedAt });
   const status = resolveSidebarThreadStatus(thread);
-  const isInFlight =
-    status === "working" || status === "monitoring" || status === "approval" || status === "input";
   // A woken thread reappears at its original position (the sort is
   // deliberately static), so the pill has to carry the weight. Snoozing is
   // an explicit act, so the pill clears only when the user re-engages:
 @@ -1123,35 +1124,32 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
           icon: "working" as const,
           // No shimmer: a label that animates forever is noise in a sidebar
           // full of them (and repaints every vsync on high-refresh displays).
-          // Working is a background state, so it rests at the dim end of what
+          className: "text-sky-600 dark:text-sky-400",
-          // the old pulse cycled through; only the thread you have open gets
-          // the label at full strength.
-          className: cn("text-sky-600 dark:text-sky-400", !props.isActive && "opacity-75"),
         }
       : status === "monitoring"
         ? {
             // Monitoring is calm background presence, not active progress
             // (monitoring-pill D6), so it keeps the label at full strength.
             label: "Monitoring",
-            icon: null,
+            icon: "monitoring" as const,
-            className: "text-sky-600 dark:text-sky-400",
+            className: "text-foreground dark:text-white",
           }
         : status === "approval"
           ? {
               label: "Approval",
-              icon: null,
+              icon: "approval" as const,
               className: "text-amber-700 dark:text-amber-300",
             }
           : status === "input"
             ? {
                 label: "Input",
-                icon: null,
+                icon: "input" as const,
                 className: "text-indigo-600 dark:text-indigo-300",
               }
             : status === "failed"
               ? {
                   label: "Failed",
-                  icon: null,
+                  icon: "failed" as const,
                   className: "text-red-700 dark:text-red-300",
                 }
               : isWoke
 @@ -1396,10 +1394,6 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
           : shouldRecede
             ? "text-sidebar-muted-foreground/75 hover:bg-sidebar-row-hover hover:text-sidebar-foreground"
             : "bg-transparent text-sidebar-foreground hover:bg-sidebar-row-hover",
-    isInFlight &&
-      !props.isActive &&
-      !isSelected &&
-      "opacity-70 transition-opacity hover:opacity-100",
     isFileDragOver && "ring-1 ring-inset ring-primary/70",
     // The hover tint must not clobber an active/selected row's own surface.
     isFileDragOver && !props.isActive && !isSelected && "bg-sidebar-row-hover",
 @@ -1462,7 +1456,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               "truncate",
               shouldRecede
                 ? "text-secondary-label"
-                : isUnread || isWoke
+                : isUnread || isWoke || status === "input"
                   ? "text-foreground"
                   : status === "failed"
                     ? "text-foreground/95"
 @@ -1472,7 +1466,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               "truncate group-focus-within/sidebar-row:text-foreground group-hover/sidebar-row:text-foreground",
               shouldRecede
                 ? "text-secondary-label/70"
-                : props.isActive || isWoke
+                : props.isActive || isWoke || status === "input"
                   ? "text-foreground"
                   : isUnread
                     ? "text-muted-foreground"
 @@ -1814,6 +1808,14 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                         >
                           {topStatus.icon === "working" ? (
                             <CircleDashedIcon aria-hidden className="size-4 shrink-0" />
+                          ) : topStatus.icon === "input" ? (
+                            <MessageCircleQuestionIcon aria-hidden className="size-4 shrink-0" />
+                          ) : topStatus.icon === "approval" ? (
+                            <ShieldQuestionIcon aria-hidden className="size-4 shrink-0" />
+                          ) : topStatus.icon === "failed" ? (
+                            <CircleAlertIcon aria-hidden className="size-4 shrink-0" />
+                          ) : topStatus.icon === "monitoring" ? (
+                            <EyeIcon aria-hidden className="size-4 shrink-0" />
                           ) : topStatus.icon === "done" ? (
                             <CircleCheckIcon aria-hidden className="size-4 shrink-0" />
                           ) : null}