Commit f0347322441f3b8e473a8d13ea7006cbcb4fb761 | the-knife

author	Theo Browne <me@t3.gg> 2026-09-04 05:30:51-07:00
committer	GitHub <noreply@github.com> 2026-09-04 05:30:51-07:00
log	f0347322441f3b8e473a8d13ea7006cbcb4fb761
tree	cb3237f8cb11fee352d5c010e9a78104cd4ae3a9
parent	d5b94100863057fb4629f9ad4a35753d16917924
signature	Signed by PGP key B5690EEEBB952194

feat(web): show which sidebar threads hold an unsent draft (#9658)

Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

4 files changed, 106 insertions(+), 11 deletions(-)

apps
- web
  - src
    components
    Sidebar.tsx
    composerDraftStore.test.ts
    composerDraftStore.ts
docs
- user
  - thread-sidebar.md

apps/web/src/components/Sidebar.tsx+65-11

 @@ -203,6 +203,7 @@ import {
   composerDraftHasUserContent,
   DraftId,
   useComposerDraftStore,
+  useThreadHasUnsentDraft,
   type ComposerThreadDraftState,
   type DraftSessionState,
 } from "../composerDraftStore";
 @@ -487,6 +488,11 @@ function SortablePinnedThreadRow(props: {
   return props.children({ listeners, setNodeRef, transform, transition, isDragging });
 }
+// Unsent work shares one look: the new-thread draft rows and thread rows
+// with unsent composer text both use this tint and pen so they read alike.
+const draftSurfaceClassName = "bg-amber-400/[0.04] hover:bg-amber-400/[0.08]";
+const draftPenClassName = "size-3 shrink-0 text-amber-600 dark:text-amber-300/80";
 // One unsent draft session the user has invested content in. Two lines,
 // nothing else: project name, then the typed prompt. All the draft's
 // settings (model, env mode, branch, worktree) still travel with it —
 @@ -552,19 +558,14 @@ const SidebarDraftRow = memo(function SidebarDraftRow(props: {
         data-testid="sidebar-draft-row"
         className={cn(
           "group/sidebar-row relative w-full cursor-pointer overflow-hidden rounded-md text-left text-sidebar-foreground outline-none select-none",
-          props.isActive
+          props.isActive ? "bg-sidebar-row-active" : draftSurfaceClassName,
-            ? "bg-sidebar-row-active"
-            : "bg-amber-400/[0.04] hover:bg-amber-400/[0.08]",
         )}
         onClick={handleActivate}
         onKeyDown={handleKeyDown}
       >
         <div className="relative z-10 px-[var(--sidebar-row-content-inset)] py-[var(--sidebar-content-inset)]">
           <div className="flex h-5 min-w-0 items-center gap-1.5">
-            <SquarePenIcon
+            <SquarePenIcon aria-hidden className={draftPenClassName} />
-              aria-hidden
-              className="size-3 shrink-0 text-amber-600 dark:text-amber-300/80"
-            />
             <ProjectFavicon
               environmentId={session.environmentId}
               cwd={props.projectCwd ?? ""}
 @@ -827,6 +828,19 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
   });
   const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds);
   const terminalProcessCount = runningTerminalIds.length;
+  // Unsent composer text on this thread. The open thread shows its own
+  // composer, so the marker only decorates rows you have navigated away from.
+  const hasUnsentDraft = useThreadHasUnsentDraft(threadRef) && !props.isActive;
+  const clearComposerContent = useComposerDraftStore((store) => store.clearComposerContent);
+  const handleDiscardDraftClick = useCallback(
+    (event: ReactMouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
+      releaseComposerDraftUploads(threadRef);
+      clearComposerContent(threadRef);
+    },
+    [clearComposerContent, threadRef],
+  );
   const gitCwd = thread.worktreePath ?? props.projectCwd;
   const linkedPullRequestStatus = useLinkedThreadPullRequest(
 @@ -1163,9 +1177,11 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
       ? "bg-sidebar-row-active text-sidebar-foreground"
       : isSelected
         ? "bg-sidebar-row-selected text-sidebar-foreground"
-        : shouldRecede
+        : hasUnsentDraft
-          ? "text-sidebar-muted-foreground/75 hover:bg-sidebar-row-hover hover:text-sidebar-foreground"
+          ? cn(draftSurfaceClassName, "text-sidebar-foreground")
-          : "bg-transparent text-sidebar-foreground hover:bg-sidebar-row-hover",
+          : 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 &&
 @@ -1251,6 +1267,25 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
       <TerminalIcon className={cn("size-3.5", terminalStatus.pulse && "animate-status-pulse")} />
     </span>
   ) : null;
+  // Same pen the new-thread draft rows lead with, so both kinds of unsent
+  // work read the same way in the list.
+  const draftIndicator = hasUnsentDraft ? (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="img"
+            aria-label="Unsent draft"
+            data-testid={`sidebar-draft-indicator-${thread.id}`}
+            className="inline-flex shrink-0 items-center"
+          />
+        }
+      >
+        <SquarePenIcon aria-hidden className={draftPenClassName} />
+      </TooltipTrigger>
+      <TooltipPopup side="top">Unsent draft</TooltipPopup>
+    </Tooltip>
+  ) : null;
   const pinIndicator = props.isPinned ? (
     props.pinningSupported ? (
       <Tooltip>
 @@ -1318,6 +1353,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                 className="size-4"
               />
             </span>
+            {draftIndicator}
             {title}
             {pinIndicator}
             {terminalStatusIcon}
 @@ -1465,6 +1501,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
         >
           <div className="relative z-10 h-[4.875rem] px-[var(--sidebar-row-content-inset)] py-[var(--sidebar-content-inset)]">
             <div className="flex h-5 min-w-0 items-center gap-1.5">
+              {draftIndicator}
               <ProjectFavicon
                 environmentId={thread.environmentId}
                 cwd={props.projectCwd ?? ""}
 @@ -1551,7 +1588,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                     threadTimeLabel(thread)
                   )}
                 </span>
-                {props.settlementSupported || showSnoozeButton ? (
+                {props.settlementSupported || showSnoozeButton || hasUnsentDraft ? (
                   <span
                     className={cn(
                       // focus-visible, not focus-within: a mouse click leaves
 @@ -1563,6 +1600,23 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
                       snoozeMenuOpen && "pointer-events-auto static opacity-100",
                     )}
                   >
+                    {hasUnsentDraft ? (
+                      <Tooltip>
+                        <TooltipTrigger
+                          render={
+                            <button
+                              type="button"
+                              aria-label="Discard draft"
+                              onClick={handleDiscardDraftClick}
+                              className="inline-flex cursor-pointer items-center rounded-md bg-transparent px-1.5 text-xs text-muted-foreground hover:text-foreground"
+                            />
+                          }
+                        >
+                          <XIcon className="size-3.5" />
+                        </TooltipTrigger>
+                        <TooltipPopup side="top">Discard draft</TooltipPopup>
+                      </Tooltip>
+                    ) : null}
                     {showSnoozeButton ? (
                       <SnoozePopoverButton
                         open={snoozeMenuOpen}

apps/web/src/composerDraftStore.test.ts+26

...	@@ -66,6 +66,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"	...	@@ -66,6 +66,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test"
66	import {	66	import {
67	COMPOSER_DRAFT_STORAGE_KEY,	67	COMPOSER_DRAFT_STORAGE_KEY,
68	clearComposerDraftsEnvironment,	68	clearComposerDraftsEnvironment,
		69	composerDraftHasUserContent,
69	finalizePromotedDraftThreadByRef,	70	finalizePromotedDraftThreadByRef,
70	markPromotedDraftThread,	71	markPromotedDraftThread,
71	markPromotedDraftThreadByRef,	72	markPromotedDraftThreadByRef,
...	@@ -347,6 +348,31 @@ describe("composerDraftStore clearComposerContent", () => {	...	@@ -347,6 +348,31 @@ describe("composerDraftStore clearComposerContent", () => {
347	});	348	});
348	});	349	});
349		350
		351	describe("composerDraftStore unsent draft marker", () => {
		352	const threadId = ThreadId.make("thread-unsent-marker");
		353	const threadRef = scopeThreadRef(TEST_ENVIRONMENT_ID, threadId);
		354
		355	beforeEach(() => {
		356	resetComposerDraftStore();
		357	});
		358
		359	it("reports content for typed text and clears when the composer is emptied", () => {
		360	const hasDraft = () =>
		361	composerDraftHasUserContent(useComposerDraftStore.getState().getComposerDraft(threadRef));
		362
		363	expect(hasDraft()).toBe(false);
		364
		365	useComposerDraftStore.getState().setPrompt(threadRef, " ");
		366	expect(hasDraft()).toBe(false);
		367
		368	useComposerDraftStore.getState().setPrompt(threadRef, "follow up on the relay case");
		369	expect(hasDraft()).toBe(true);
		370
		371	useComposerDraftStore.getState().clearComposerContent(threadRef);
		372	expect(hasDraft()).toBe(false);
		373	});
		374	});
		375
350	describe("composerDraftStore file attachments", () => {	376	describe("composerDraftStore file attachments", () => {
351	const threadId = ThreadId.make("thread-files");	377	const threadId = ThreadId.make("thread-files");
352	const threadRef = scopeThreadRef(TEST_ENVIRONMENT_ID, threadId);	378	const threadRef = scopeThreadRef(TEST_ENVIRONMENT_ID, threadId);

apps/web/src/composerDraftStore.ts+11

...	@@ -4009,6 +4009,17 @@ export function useComposerThreadDraft(threadRef: ComposerThreadTarget): Compose	...	@@ -4009,6 +4009,17 @@ export function useComposerThreadDraft(threadRef: ComposerThreadTarget): Compose
4009	});	4009	});
4010	}	4010	}
4011		4011
		4012	/**
		4013	* True when a real thread's composer holds unsent user content. Selects a
		4014	* boolean so the sidebar row that reads it re-renders only when the draft
		4015	* appears or disappears, not on every keystroke.
		4016	*/
		4017	export function useThreadHasUnsentDraft(threadRef: ScopedThreadRef): boolean {
		4018	return useComposerDraftStore((state) =>
		4019	composerDraftHasUserContent(getComposerDraftState(state, threadRef)),
		4020	);
		4021	}
		4022
4012	export function useComposerDraftModelState(	4023	export function useComposerDraftModelState(
4013	threadRef: ComposerThreadTarget,	4024	threadRef: ComposerThreadTarget,
4014	): ComposerDraftModelState {	4025	): ComposerDraftModelState {

docs/user/thread-sidebar.md+4

...	@@ -36,6 +36,10 @@ by older clients on one device no longer control this behavior.	...	@@ -36,6 +36,10 @@ by older clients on one device no longer control this behavior.
36	When you un-settle a thread, it returns to the top of the active list so you can find it right	36	When you un-settle a thread, it returns to the top of the active list so you can find it right
37	away. Its timestamps do not change. Other threads keep their positions.	37	away. Its timestamps do not change. Other threads keep their positions.
38		38
		39	A thread whose composer holds unsent text or attachments shows an amber tint and a pen icon in the
		40	sidebar, the same marks a new-thread draft uses. On web and desktop, hover the row and choose the
		41	X to discard that draft without opening the thread.
		42
39	Right-click a pull request link in a thread and choose Link to thread to show that pull request	43	Right-click a pull request link in a thread and choose Link to thread to show that pull request
40	in the sidebar. The thread settles when the linked pull request merges if **Auto-settle merged	44	in the sidebar. The thread settles when the linked pull request merges if **Auto-settle merged
41	threads is enabled. Right-click the same link and choose Unlink from thread** to remove it.	45	threads is enabled. Right-click the same link and choose Unlink from thread** to remove it.