feat(web): show unsent drafts in the sidebar (#23)

* feat(web): show unsent drafts in the sidebar

- Add a draft indicator to sidebar thread rows
- Surface drafts containing text or attachments, excluding settings-only state

* fix(web): brighten the sidebar draft pencil on row hover

The pencil sat at a flat secondary-label colour, so on a settled row it
read brighter than the row's own title and stayed put while the rest of
the row lifted. Match the PR badge's settled treatment: muted at rest,
transitioning with the row on hover. The pencil has no state colour of
its own, so it lifts to the same foreground the title does, and the
active row opts out like the PR badge already does.

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: incognitojam

apps/web/src/components/Sidebar.tsx

@@ -44,6 +44,7 @@ import {
   FolderPlusIcon,
   GitBranchIcon,
   MessageSquareIcon,
+  PencilIcon,
   PinIcon,
   PlusIcon,
   SearchIcon,
@@ -93,6 +94,7 @@ import {
   buildSidebarProjectSnapshots,
   type SidebarProjectSnapshot,
 } from "../sidebarProjectGrouping";
+import { useComposerThreadHasDraftContent } from "../composerDraftStore";
 import { legacyProjectCwdPreferenceKey, useUiStateStore } from "../uiStateStore";
 import { useThreadSelectionStore } from "../threadSelectionStore";
 import { useThreadActions } from "../hooks/useThreadActions";
@@ -740,6 +742,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
   });
   const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds);
   const terminalProcessCount = runningTerminalIds.length;
+  const hasDraft = useComposerThreadHasDraftContent(threadRef);
 
   const gitCwd = thread.worktreePath ?? props.projectCwd;
   const gitStatus = useEnvironmentQuery(
@@ -1113,6 +1116,23 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
       <TerminalIcon className={cn("size-3.5", terminalStatus.pulse && "animate-status-pulse")} />
     </span>
   ) : null;
+  const draftIcon = hasDraft ? (
+    <span
+      role="img"
+      aria-label="Unsent draft"
+      data-testid={`sidebar-v2-draft-${thread.id}`}
+      className={cn(
+        // Matches the PR badge's settled treatment: muted at rest so the
+        // parked tail stays quiet, brightening with the row on hover. The
+        // pencil has no state colour of its own, so it lifts to the same
+        // foreground the title does.
+        "inline-flex shrink-0 items-center justify-center text-secondary-label",
+        !props.isActive && "transition-colors group-hover/v2-row:text-foreground",
+      )}
+    >
+      <PencilIcon className="size-3.5" />
+    </span>
+  ) : null;
 
   if (variant === "slim") {
     return (
@@ -1154,6 +1174,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               />
             </span>
             {title}
+            {draftIcon}
             {terminalStatusIcon}
             {isRegeneratingTitle ? (
               <span role="status" className="sr-only">
@@ -1436,6 +1457,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
               ) : (
                 <span className="flex-1" />
               )}
+              {draftIcon}
               {terminalStatusIcon}
               {prBadge}
               {diff ? (

apps/web/src/composerDraftStore.ts

@@ -3566,6 +3566,29 @@ export function clearComposerDraftsEnvironment(environmentId: EnvironmentId): vo
   composerDebouncedStorage.flush();
 }
 
+/**
+ * Whether the thread has unsent composer content worth surfacing in thread
+ * lists. Content means prompt text or attachments — a draft entry that only
+ * carries settings (model selection, runtime mode) doesn't count.
+ */
+export function useComposerThreadHasDraftContent(threadRef: ComposerThreadTarget): boolean {
+  return useComposerDraftStore((state) => {
+    const draft = getComposerDraftState(state, threadRef);
+    if (!draft) {
+      return false;
+    }
+    return (
+      draft.prompt.trim().length > 0 ||
+      draft.images.length > 0 ||
+      draft.persistedAttachments.length > 0 ||
+      draft.terminalContexts.length > 0 ||
+      draft.elementContexts.length > 0 ||
+      draft.previewAnnotations.length > 0 ||
+      draft.reviewComments.length > 0
+    );
+  });
+}
+
 export function useComposerThreadDraft(threadRef: ComposerThreadTarget): ComposerThreadDraftState {
   return useComposerDraftStore((state) => {
     return getComposerDraftState(state, threadRef) ?? EMPTY_THREAD_DRAFT;