fix(comments): chip sits beside the send button; message marker moves to the bottom-right

apps/web/src/components/chat/ChatComposer.tsx

@@ -6885,8 +6885,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
         ) : null}
       </ComposerBanner.Dock>
       <div className="relative">
-        {/* T3-CUSTOM(expbkt3): sent review comments, top-right in the chat box. */}
-        <ThreadCommentsComposerChip />
         <ComposerSurface.Main
           ref={composerMainSurfaceRef}
           data-inline-resting-controls={restingControlsHost === null ? "true" : undefined}
@@ -7614,6 +7612,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                       </Tooltip>
                     </>
                   ) : null}
+                  {/* T3-CUSTOM(expbkt3): sent review comments, beside the send button. */}
+                  <ThreadCommentsComposerChip />
                   <ComposerFooterPrimaryActions
                     compact={isComposerResting || isComposerPrimaryActionsCompact}
                     activeContextWindow={

apps/web/src/fork/threadComments/ThreadCommentMarks.tsx

@@ -9,8 +9,9 @@
  * numbered pin at the end of the range as the click target (highlights are not
  * hit-testable). To be findable while scrolling, every unresolved comment also
  * draws a bar in the row's left gutter spanning its lines, and the message
- * carries one bubble chip with the unresolved count at its top-right corner
- * (the timeline clips anything outside the message column, so a chip cannot
+ * carries one bubble chip with the unresolved count at its bottom-right corner
+ * (the top-right is where a leading code block keeps its wrap and copy buttons,
+ * and the timeline clips anything outside the message column, so a chip cannot
  * hang in the margin). Everything is absolutely positioned inside the row, so
  * it travels with the virtualised list for free, and is only recomputed when
  * the row resizes or its text mutates — never on scroll or per frame.
@@ -249,7 +250,7 @@ const ThreadCommentPins = memo(function ThreadCommentPins({
           data-thread-comment-marker={messageId}
           aria-label={`${marker.count} ${marker.count === 1 ? "comment" : "comments"} to handle on this message: open in the Comments panel`}
           className={cn(
-            "pointer-events-auto absolute top-0.5 right-1 flex h-4 cursor-pointer items-center gap-0.5 rounded-full px-1.5 text-[10px] font-semibold tabular-nums shadow-sm ring-1 ring-background transition-transform hover:scale-110",
+            "pointer-events-auto absolute right-1 bottom-0.5 flex h-4 cursor-pointer items-center gap-0.5 rounded-full px-1.5 text-[10px] font-semibold tabular-nums shadow-sm ring-1 ring-background transition-transform hover:scale-110",
             URGENCY_CLASS[marker.urgency],
           )}
           onPointerDown={(event) => event.preventDefault()}

apps/web/src/fork/threadComments/ThreadCommentsComposerChip.tsx

@@ -1,5 +1,5 @@
 /**
- * T3-CUSTOM(expbkt3): the review-comment chip in the chat box's top-right corner.
+ * T3-CUSTOM(expbkt3): the review-comment chip in the chat box's action row.
  *
  * Comments not sent yet live in the strip above the chat box. Once they go,
  * the strip leaves and this chip keeps the rest in view: blue while the agent
@@ -56,21 +56,22 @@ export function ThreadCommentsComposerChip() {
   const target = { environmentId: threadRef.environmentId };
 
   return (
-    // Straddles the chat box's top edge, so it never covers the first line of a draft.
-    <div className="absolute top-0 right-4 z-10 -translate-y-1/2">
+    // Inline in the chat box's action row, just before the send button: the one
+    // row both composer layouts keep, so it never covers the draft.
+    <div className="flex shrink-0 items-center">
       <Menu>
         <MenuTrigger
           render={
             <Badge
-              size="sm"
+              size="lg"
               variant={TONE_VARIANT[composerChipTone(counts)]}
               render={<button type="button" aria-label={`Review comments: ${label}`} />}
             />
           }
         >
-          <MessageSquareTextIcon aria-hidden className="size-3" />
+          <MessageSquareTextIcon aria-hidden className="size-3.5" />
           {label}
-          <ChevronDownIcon aria-hidden className="size-3 opacity-70" />
+          <ChevronDownIcon aria-hidden className="size-3.5 opacity-70" />
         </MenuTrigger>
         <MenuPopup align="end" side="bottom" sideOffset={4}>
           <MenuGroup>