From 0b5d4b41f10fd21cd257a6b390573598d2ade048 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Sat, 14 Mar 2026 13:52:30 +0200
Subject: [PATCH] refactor: enhance task review notifications and UI components

- Updated task review notification messages for clearer formatting, emphasizing actions taken by reviewers.
- Improved styling for task comments and badges to enhance visibility and user interaction.
- Added new properties to support better tracking of review states and reviewer information in task details.
- Refactored UI components to ensure consistent spacing and layout across task-related dialogs and sections.
---
 agent-teams-controller/src/internal/review.js |   8 +-
 .../team/dialogs/TaskCommentsSection.tsx      |   3 +-
 .../team/dialogs/TaskDetailDialog.tsx         | 837 +++++++++---------
 .../components/team/kanban/KanbanColumn.tsx   |   2 +-
 .../team/messages/MessageComposer.tsx         |   7 +
 .../components/ui/MentionSuggestionList.tsx   |   7 +-
 .../components/ui/MentionableTextarea.tsx     |  20 +-
 src/renderer/components/ui/badge.tsx          |   9 +-
 src/renderer/index.css                        |   8 +
 9 files changed, 483 insertions(+), 418 deletions(-)

diff --git a/agent-teams-controller/src/internal/review.js b/agent-teams-controller/src/internal/review.js
index b2d86afe..65cac819 100644
--- a/agent-teams-controller/src/internal/review.js
+++ b/agent-teams-controller/src/internal/review.js
@@ -82,7 +82,7 @@ function requestReview(context, taskId, flags = {}) {
       to: reviewer,
       from,
       text:
-        `Please review task #${task.displayId || task.id}.\n\n` +
+        `**Please review** task #${task.displayId || task.id}\n\n` +
         wrapAgentBlock(
           `When approved, use MCP tool review_approve:\n` +
             `{ teamName: "${context.teamName}", taskId: "${task.id}", notifyOwner: true }\n\n` +
@@ -140,8 +140,8 @@ function approveReview(context, taskId, flags = {}) {
       from,
       text:
         note && note !== 'Approved'
-          ? `Task #${task.displayId || task.id} approved.\n\n${note}`
-          : `Task #${task.displayId || task.id} approved.`,
+          ? `@${from} **approved** task #${task.displayId || task.id}\n\n${note}`
+          : `@${from} **approved** task #${task.displayId || task.id}`,
       summary: `Approved #${task.displayId || task.id}`,
       source: 'system_notification',
       ...(leadSessionId ? { leadSessionId } : {}),
@@ -192,7 +192,7 @@ function requestChanges(context, taskId, flags = {}) {
     to: task.owner,
     from,
     text:
-      `Task #${task.displayId || task.id} needs fixes.\n\n${comment}\n\n` +
+      `@${from} **requested changes** for task #${task.displayId || task.id}\n\n${comment}\n\n` +
       'The task has been moved back to pending. When you are ready to resume, review the task context, start it explicitly, implement the fixes, mark it completed, and request review again.',
     ...(Array.isArray(flags.taskRefs) ? { taskRefs: flags.taskRefs } : {}),
     summary: `Fix request for #${task.displayId || task.id}`,
diff --git a/src/renderer/components/team/dialogs/TaskCommentsSection.tsx b/src/renderer/components/team/dialogs/TaskCommentsSection.tsx
index 949f2e12..f5a0d54e 100644
--- a/src/renderer/components/team/dialogs/TaskCommentsSection.tsx
+++ b/src/renderer/components/team/dialogs/TaskCommentsSection.tsx
@@ -210,7 +210,7 @@ export const TaskCommentsSection = ({
               <AnimatedHeightReveal key={comment.id} animate={newCommentIds.has(comment.id)}>
                 <div
                   className={[
-                    'group px-4 py-2.5',
+                    'group min-w-0 overflow-hidden px-4 py-2.5',
                     comment.type === 'review_approved'
                       ? 'border-y border-emerald-500/20 bg-emerald-500/5'
                       : comment.type === 'review_request'
@@ -299,6 +299,7 @@ export const TaskCommentsSection = ({
                           />
                         ) : (
                           <span
+                            className="break-words"
                             onClickCapture={
                               onTaskIdClick
                                 ? (e) => {
diff --git a/src/renderer/components/team/dialogs/TaskDetailDialog.tsx b/src/renderer/components/team/dialogs/TaskDetailDialog.tsx
index 1464765f..989f2823 100644
--- a/src/renderer/components/team/dialogs/TaskDetailDialog.tsx
+++ b/src/renderer/components/team/dialogs/TaskDetailDialog.tsx
@@ -566,6 +566,26 @@ export const TaskDetailDialog = ({
                 <span className="text-xs italic text-[var(--color-text-muted)]">Unassigned</span>
               )}
             </div>
+            {currentTask.reviewer ||
+            (currentTask.reviewState && currentTask.reviewState !== 'none') ? (
+              <div className="flex items-center gap-1.5">
+                <Eye size={12} className="text-[var(--color-text-muted)]" />
+                {currentTask.reviewer ? (
+                  <MemberBadge
+                    name={currentTask.reviewer}
+                    color={colorMap.get(currentTask.reviewer)}
+                    size="sm"
+                  />
+                ) : null}
+                {currentTask.reviewState && currentTask.reviewState !== 'none' ? (
+                  <span
+                    className={`inline-flex rounded-full px-2 py-0.5 text-[10px] font-medium ${REVIEW_STATE_DISPLAY[currentTask.reviewState].bg} ${REVIEW_STATE_DISPLAY[currentTask.reviewState].text}`}
+                  >
+                    {REVIEW_STATE_DISPLAY[currentTask.reviewState].label}
+                  </span>
+                ) : null}
+              </div>
+            ) : null}
             {currentTask.createdBy ? (
               <div className="flex items-center gap-1.5 text-[var(--color-text-muted)]">
                 <PenLine size={12} />
@@ -688,451 +708,462 @@ export const TaskDetailDialog = ({
             </div>
           ) : null}
 
-          {/* Description */}
-          <CollapsibleTeamSection
-            title="Description"
-            icon={<AlignLeft size={14} />}
-            contentClassName="pl-2.5"
-            headerClassName="-mx-6 w-[calc(100%+3rem)]"
-            headerContentClassName="pl-6"
-            defaultOpen
-          >
-            {editingDescription ? (
-              <div className="space-y-2">
-                <div className="flex items-center gap-2">
-                  <button
-                    type="button"
-                    className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
-                      !descriptionPreview
-                        ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
-                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
-                    }`}
-                    onClick={() => setDescriptionPreview(false)}
-                  >
-                    <Pencil size={12} />
-                    Edit
-                  </button>
-                  <button
-                    type="button"
-                    className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
-                      descriptionPreview
-                        ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
-                        : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
-                    }`}
-                    onClick={() => setDescriptionPreview(true)}
-                  >
-                    <Eye size={12} />
-                    Preview
-                  </button>
-                </div>
-                {descriptionPreview ? (
-                  <div className="max-h-[200px] overflow-y-auto rounded border border-[var(--color-border)] p-2">
-                    {descriptionDraft.trim() ? (
-                      <MarkdownViewer content={descriptionDraft} maxHeight="max-h-[180px]" />
-                    ) : (
-                      <p className="text-xs text-[var(--color-text-muted)]">Nothing to preview</p>
-                    )}
-                  </div>
-                ) : (
-                  <Textarea
-                    autoFocus
-                    value={descriptionDraft}
-                    onChange={(e) => setDescriptionDraft(e.target.value)}
-                    disabled={savingDescription}
-                    rows={6}
-                    className="text-xs"
-                    placeholder="Task description (supports markdown)"
-                  />
-                )}
-                <div className="flex items-center gap-2">
-                  <Button
-                    size="sm"
-                    className="h-7 text-xs"
-                    disabled={savingDescription}
-                    onClick={() => void saveDescription()}
-                  >
-                    {savingDescription ? (
-                      <Loader2 size={12} className="mr-1 animate-spin" />
-                    ) : (
-                      <Check size={12} className="mr-1" />
-                    )}
-                    Save
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-7 text-xs"
-                    disabled={savingDescription}
-                    onClick={() => setEditingDescription(false)}
-                  >
-                    <X size={12} className="mr-1" />
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            ) : currentTask.description ? (
-              <div className="group relative">
-                <ExpandableContent collapsedHeight={200}>
-                  <MarkdownViewer content={currentTask.description} maxHeight="max-h-none" bare />
-                </ExpandableContent>
-                <Tooltip>
-                  <TooltipTrigger asChild>
+          {/* Sections container with uniform spacing */}
+          <div className="space-y-1">
+            {/* Description */}
+            <CollapsibleTeamSection
+              title="Description"
+              icon={<AlignLeft size={14} />}
+              contentClassName="pl-2.5"
+              headerClassName="-mx-6 w-[calc(100%+3rem)]"
+              headerContentClassName="pl-6"
+              defaultOpen
+            >
+              {editingDescription ? (
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
                     <button
                       type="button"
-                      className="absolute right-0 top-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)] group-hover:opacity-100"
-                      onClick={startEditDescription}
+                      className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
+                        !descriptionPreview
+                          ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
+                          : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
+                      }`}
+                      onClick={() => setDescriptionPreview(false)}
                     >
                       <Pencil size={12} />
+                      Edit
                     </button>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">Edit description</TooltipContent>
-                </Tooltip>
-              </div>
-            ) : (
-              <button
-                type="button"
-                className="text-xs text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text-secondary)]"
-                onClick={startEditDescription}
-              >
-                Click to add description...
-              </button>
-            )}
-          </CollapsibleTeamSection>
-
-          {/* Attachments */}
-          <CollapsibleTeamSection
-            title="Attachments"
-            icon={<ImageIcon size={14} />}
-            badge={
-              (currentTask.attachments?.length ?? 0) + commentImageAttachments.length > 0
-                ? (currentTask.attachments?.length ?? 0) + commentImageAttachments.length
-                : undefined
-            }
-            contentClassName="pl-2.5"
-            headerClassName="-mx-6 w-[calc(100%+3rem)]"
-            headerContentClassName="pl-6"
-            defaultOpen={
-              (currentTask.attachments?.length ?? 0) > 0 || commentImageAttachments.length > 0
-            }
-          >
-            <TaskAttachments
-              teamName={teamName}
-              taskId={currentTask.id}
-              attachments={currentTask.attachments ?? []}
-            />
-            {commentImageAttachments.length > 0 ? (
-              <CommentImagesGrid
-                items={commentImageAttachments}
-                teamName={teamName}
-                taskId={currentTask.id}
-              />
-            ) : null}
-          </CollapsibleTeamSection>
-
-          {/* Changes */}
-          {variant === 'team' && canShowTaskChanges && onViewChanges ? (
-            <CollapsibleTeamSection
-              key={`task-changes:${currentTask.id}`}
-              title="Changes"
-              icon={<FileDiff size={14} />}
-              badge={taskChangesFiles ? taskChangesFiles.length : undefined}
-              headerExtra={
-                changesSectionOpen ? (
+                    <button
+                      type="button"
+                      className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${
+                        descriptionPreview
+                          ? 'bg-[var(--color-surface-raised)] text-[var(--color-text)]'
+                          : 'text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]'
+                      }`}
+                      onClick={() => setDescriptionPreview(true)}
+                    >
+                      <Eye size={12} />
+                      Preview
+                    </button>
+                  </div>
+                  {descriptionPreview ? (
+                    <div className="max-h-[200px] overflow-y-auto rounded border border-[var(--color-border)] p-2">
+                      {descriptionDraft.trim() ? (
+                        <MarkdownViewer content={descriptionDraft} maxHeight="max-h-[180px]" />
+                      ) : (
+                        <p className="text-xs text-[var(--color-text-muted)]">Nothing to preview</p>
+                      )}
+                    </div>
+                  ) : (
+                    <Textarea
+                      autoFocus
+                      value={descriptionDraft}
+                      onChange={(e) => setDescriptionDraft(e.target.value)}
+                      disabled={savingDescription}
+                      rows={6}
+                      className="text-xs"
+                      placeholder="Task description (supports markdown)"
+                    />
+                  )}
+                  <div className="flex items-center gap-2">
+                    <Button
+                      size="sm"
+                      className="h-7 text-xs"
+                      disabled={savingDescription}
+                      onClick={() => void saveDescription()}
+                    >
+                      {savingDescription ? (
+                        <Loader2 size={12} className="mr-1 animate-spin" />
+                      ) : (
+                        <Check size={12} className="mr-1" />
+                      )}
+                      Save
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-7 text-xs"
+                      disabled={savingDescription}
+                      onClick={() => setEditingDescription(false)}
+                    >
+                      <X size={12} className="mr-1" />
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              ) : currentTask.description ? (
+                <div className="group relative">
+                  <ExpandableContent collapsedHeight={200}>
+                    <MarkdownViewer content={currentTask.description} maxHeight="max-h-none" bare />
+                  </ExpandableContent>
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <button
                         type="button"
-                        className="pointer-events-auto rounded p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-section-hover)] hover:text-[var(--color-text)] disabled:opacity-50"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleRefreshChanges();
-                        }}
-                        disabled={taskChangesLoading}
-                        aria-label="Refresh changes"
+                        className="absolute right-0 top-0 rounded p-1 text-[var(--color-text-muted)] opacity-0 transition-opacity hover:bg-[var(--color-surface-raised)] hover:text-[var(--color-text)] group-hover:opacity-100"
+                        onClick={startEditDescription}
                       >
-                        <RefreshCw
-                          size={12}
-                          className={taskChangesLoading ? 'animate-spin' : undefined}
-                        />
+                        <Pencil size={12} />
                       </button>
                     </TooltipTrigger>
-                    <TooltipContent side="top">Refresh</TooltipContent>
+                    <TooltipContent side="top">Edit description</TooltipContent>
                   </Tooltip>
-                ) : null
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  className="text-xs text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-text-secondary)]"
+                  onClick={startEditDescription}
+                >
+                  Click to add description...
+                </button>
+              )}
+            </CollapsibleTeamSection>
+
+            {/* Attachments */}
+            <CollapsibleTeamSection
+              title="Attachments"
+              icon={<ImageIcon size={14} />}
+              badge={
+                (currentTask.attachments?.length ?? 0) + commentImageAttachments.length > 0
+                  ? (currentTask.attachments?.length ?? 0) + commentImageAttachments.length
+                  : undefined
               }
               contentClassName="pl-2.5"
               headerClassName="-mx-6 w-[calc(100%+3rem)]"
               headerContentClassName="pl-6"
-              defaultOpen={false}
-              onOpenChange={handleChangesSectionOpenChange}
+              defaultOpen={
+                (currentTask.attachments?.length ?? 0) > 0 || commentImageAttachments.length > 0
+              }
             >
-              {taskChangesLoading ? (
-                <div className="flex items-center gap-2 py-2 text-xs text-[var(--color-text-muted)]">
-                  <Loader2 size={14} className="animate-spin" />
-                  Loading changes...
-                </div>
-              ) : taskChangesError ? (
-                <p className="text-xs text-red-400">{taskChangesError}</p>
-              ) : taskChangesFiles && taskChangesFiles.length > 0 ? (
-                <div className="max-h-[200px] space-y-0.5 overflow-y-auto">
-                  {taskChangesFiles.map((file) => (
-                    <div
-                      key={file.filePath}
-                      className="group flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors hover:bg-[var(--color-surface-raised)]"
-                    >
-                      <FileIcon
-                        fileName={file.relativePath.split('/').pop() ?? file.relativePath}
-                        className="size-3.5"
-                      />
-                      <button
-                        type="button"
-                        className="min-w-0 flex-1 truncate text-left font-mono text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text)]"
-                        onClick={() => {
-                          handleClose();
-                          onViewChanges(currentTask.id, file.filePath);
-                        }}
+              <TaskAttachments
+                teamName={teamName}
+                taskId={currentTask.id}
+                attachments={currentTask.attachments ?? []}
+              />
+              {commentImageAttachments.length > 0 ? (
+                <CommentImagesGrid
+                  items={commentImageAttachments}
+                  teamName={teamName}
+                  taskId={currentTask.id}
+                />
+              ) : null}
+            </CollapsibleTeamSection>
+
+            {/* Changes */}
+            {variant === 'team' && canShowTaskChanges && onViewChanges ? (
+              <CollapsibleTeamSection
+                key={`task-changes:${currentTask.id}`}
+                title="Changes"
+                icon={<FileDiff size={14} />}
+                badge={taskChangesFiles ? taskChangesFiles.length : undefined}
+                headerExtra={
+                  changesSectionOpen ? (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <button
+                          type="button"
+                          className="pointer-events-auto rounded p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-section-hover)] hover:text-[var(--color-text)] disabled:opacity-50"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleRefreshChanges();
+                          }}
+                          disabled={taskChangesLoading}
+                          aria-label="Refresh changes"
+                        >
+                          <RefreshCw
+                            size={12}
+                            className={taskChangesLoading ? 'animate-spin' : undefined}
+                          />
+                        </button>
+                      </TooltipTrigger>
+                      <TooltipContent side="top">Refresh</TooltipContent>
+                    </Tooltip>
+                  ) : null
+                }
+                contentClassName="pl-2.5"
+                headerClassName="-mx-6 w-[calc(100%+3rem)]"
+                headerContentClassName="pl-6"
+                defaultOpen={false}
+                onOpenChange={handleChangesSectionOpenChange}
+              >
+                {taskChangesLoading ? (
+                  <div className="flex items-center gap-2 py-2 text-xs text-[var(--color-text-muted)]">
+                    <Loader2 size={14} className="animate-spin" />
+                    Loading changes...
+                  </div>
+                ) : taskChangesError ? (
+                  <p className="text-xs text-red-400">{taskChangesError}</p>
+                ) : taskChangesFiles && taskChangesFiles.length > 0 ? (
+                  <div className="max-h-[200px] space-y-0.5 overflow-y-auto">
+                    {taskChangesFiles.map((file) => (
+                      <div
+                        key={file.filePath}
+                        className="group flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors hover:bg-[var(--color-surface-raised)]"
                       >
-                        {file.relativePath}
-                      </button>
-                      <span className="flex shrink-0 items-center gap-1.5">
-                        {file.linesAdded > 0 ? (
-                          <span className="text-emerald-400">+{file.linesAdded}</span>
-                        ) : null}
-                        {file.linesRemoved > 0 ? (
-                          <span className="text-red-400">-{file.linesRemoved}</span>
-                        ) : null}
-                      </span>
-                      <span className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <button
-                              type="button"
-                              className="rounded p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-border-emphasis)] hover:text-[var(--color-text)]"
-                              onClick={() => {
-                                handleClose();
-                                onViewChanges(currentTask.id, file.filePath);
-                              }}
-                            >
-                              <GitCompareArrows size={13} />
-                            </button>
-                          </TooltipTrigger>
-                          <TooltipContent side="top">Review diff</TooltipContent>
-                        </Tooltip>
-                        {onOpenInEditor ? (
+                        <FileIcon
+                          fileName={file.relativePath.split('/').pop() ?? file.relativePath}
+                          className="size-3.5"
+                        />
+                        <button
+                          type="button"
+                          className="min-w-0 flex-1 truncate text-left font-mono text-[var(--color-text-secondary)] transition-colors hover:text-[var(--color-text)]"
+                          onClick={() => {
+                            handleClose();
+                            onViewChanges(currentTask.id, file.filePath);
+                          }}
+                        >
+                          {file.relativePath}
+                        </button>
+                        <span className="flex shrink-0 items-center gap-1.5">
+                          {file.linesAdded > 0 ? (
+                            <span className="text-emerald-400">+{file.linesAdded}</span>
+                          ) : null}
+                          {file.linesRemoved > 0 ? (
+                            <span className="text-red-400">-{file.linesRemoved}</span>
+                          ) : null}
+                        </span>
+                        <span className="flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity group-hover:opacity-100">
                           <Tooltip>
                             <TooltipTrigger asChild>
                               <button
                                 type="button"
                                 className="rounded p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-border-emphasis)] hover:text-[var(--color-text)]"
-                                onClick={() => onOpenInEditor(file.filePath)}
+                                onClick={() => {
+                                  handleClose();
+                                  onViewChanges(currentTask.id, file.filePath);
+                                }}
                               >
-                                <SquarePen size={13} />
+                                <GitCompareArrows size={13} />
                               </button>
                             </TooltipTrigger>
-                            <TooltipContent side="top">Open in editor</TooltipContent>
+                            <TooltipContent side="top">Review diff</TooltipContent>
                           </Tooltip>
-                        ) : null}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              ) : changesSectionOpen ? (
-                <p className="text-xs text-[var(--color-text-muted)]">No file changes detected</p>
-              ) : null}
-            </CollapsibleTeamSection>
-          ) : null}
+                          {onOpenInEditor ? (
+                            <Tooltip>
+                              <TooltipTrigger asChild>
+                                <button
+                                  type="button"
+                                  className="rounded p-1 text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-border-emphasis)] hover:text-[var(--color-text)]"
+                                  onClick={() => onOpenInEditor(file.filePath)}
+                                >
+                                  <SquarePen size={13} />
+                                </button>
+                              </TooltipTrigger>
+                              <TooltipContent side="top">Open in editor</TooltipContent>
+                            </Tooltip>
+                          ) : null}
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                ) : changesSectionOpen ? (
+                  <p className="text-xs text-[var(--color-text-muted)]">No file changes detected</p>
+                ) : null}
+              </CollapsibleTeamSection>
+            ) : null}
 
-          {/* Execution Logs — sessions that reference this task */}
-          {variant === 'team' ? (
+            {/* Execution Logs — sessions that reference this task */}
+            {variant === 'team' ? (
+              <CollapsibleTeamSection
+                key={`task-logs:${currentTask.id}`}
+                title="Execution Logs"
+                icon={<ScrollText size={14} />}
+                headerExtra={
+                  logsRefreshing || executionPreviewOnline ? (
+                    <span className="flex items-center gap-2 text-[10px] text-[var(--color-text-muted)]">
+                      {executionPreviewOnline ? (
+                        <span
+                          className="pointer-events-none relative inline-flex size-2 shrink-0"
+                          title="Online"
+                        >
+                          <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-50" />
+                          <span className="relative inline-flex size-2 rounded-full bg-emerald-400" />
+                        </span>
+                      ) : null}
+                      {logsRefreshing ? (
+                        <span className="flex items-center gap-1">
+                          <Loader2 size={10} className="animate-spin" />
+                          Updating...
+                        </span>
+                      ) : null}
+                    </span>
+                  ) : null
+                }
+                contentClassName="pl-2.5"
+                headerClassName="-mx-6 w-[calc(100%+3rem)]"
+                headerContentClassName="pl-6"
+                defaultOpen={false}
+              >
+                <div className="min-w-0">
+                  <MemberLogsTab
+                    teamName={teamName}
+                    taskId={currentTask.id}
+                    taskOwner={currentTask.owner}
+                    taskStatus={currentTask.status}
+                    taskWorkIntervals={currentTask.workIntervals}
+                    taskSince={taskSince}
+                    onRefreshingChange={setLogsRefreshing}
+                    // Only show a "latest messages" preview when this task is owned by a subagent.
+                    // For lead-owned tasks, the lead session is a mixed stream (lead + multiple agents),
+                    // so filtering to "just the member messages" is unreliable and easy to mislead.
+                    showSubagentPreview={Boolean(currentTask.owner) && !isLeadOwnedTask}
+                    // Temporary debug option: for lead-owned tasks, show quick preview from lead session.
+                    showLeadPreview={allowLeadExecutionPreview && isLeadOwnedTask}
+                    onPreviewOnlineChange={setExecutionPreviewOnline}
+                  />
+                </div>
+              </CollapsibleTeamSection>
+            ) : null}
+
+            {blockedByIds.length > 0 ||
+            blocksIds.length > 0 ||
+            relatedIds.length > 0 ||
+            relatedByIds.length > 0 ||
+            kanbanTaskState ? (
+              <div className="space-y-1">
+                {/* Dependencies */}
+                {blockedByIds.length > 0 ? (
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <span className="inline-flex items-center gap-0.5 text-xs text-yellow-300">
+                      <ArrowLeftFromLine size={12} />
+                      Blocked by
+                    </span>
+                    {blockedByIds.map((id) => {
+                      const depTask = taskMap.get(id);
+                      const isCompleted = depTask?.status === 'completed';
+                      return (
+                        <button
+                          key={id}
+                          type="button"
+                          className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                            isCompleted
+                              ? 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25'
+                              : 'bg-yellow-500/15 text-yellow-300 hover:bg-yellow-500/25'
+                          } cursor-pointer`}
+                          title={
+                            depTask
+                              ? `${formatTaskDisplayLabel(depTask)}: ${depTask.subject}`
+                              : `#${deriveTaskDisplayId(id)}`
+                          }
+                          onClick={() => handleDependencyClick(id)}
+                        >
+                          {depTask
+                            ? formatTaskDisplayLabel(depTask)
+                            : `#${deriveTaskDisplayId(id)}`}
+                        </button>
+                      );
+                    })}
+                  </div>
+                ) : null}
+
+                {blocksIds.length > 0 ? (
+                  <div className="flex flex-wrap items-center gap-1.5">
+                    <span className="inline-flex items-center gap-0.5 text-xs text-blue-400">
+                      <ArrowRightFromLine size={12} />
+                      Blocks
+                    </span>
+                    {blocksIds.map((id) => {
+                      const depTask = taskMap.get(id);
+                      const isCompleted = depTask?.status === 'completed';
+                      return (
+                        <button
+                          key={id}
+                          type="button"
+                          className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
+                            isCompleted
+                              ? 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25'
+                              : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
+                          } cursor-pointer`}
+                          title={
+                            depTask
+                              ? `${formatTaskDisplayLabel(depTask)}: ${depTask.subject}`
+                              : `#${deriveTaskDisplayId(id)}`
+                          }
+                          onClick={() => handleDependencyClick(id)}
+                        >
+                          {depTask
+                            ? formatTaskDisplayLabel(depTask)
+                            : `#${deriveTaskDisplayId(id)}`}
+                        </button>
+                      );
+                    })}
+                  </div>
+                ) : null}
+
+                {/* Review info */}
+                {kanbanTaskState ? (
+                  <div className="flex items-center gap-2">
+                    {kanbanTaskState.reviewer ? (
+                      <span className="text-xs text-[var(--color-text-secondary)]">
+                        Reviewer: {kanbanTaskState.reviewer}
+                      </span>
+                    ) : null}
+                    {kanbanTaskState.errorDescription ? (
+                      <span className="text-xs text-red-400">
+                        {kanbanTaskState.errorDescription}
+                      </span>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+            ) : null}
+
+            {/* Workflow History */}
+            {currentTask.historyEvents && currentTask.historyEvents.length > 0 ? (
+              <CollapsibleTeamSection
+                title="Workflow History"
+                icon={<History size={14} />}
+                badge={currentTask.historyEvents.length}
+                contentClassName="pl-2.5"
+                headerClassName="-mx-6 w-[calc(100%+3rem)]"
+                headerContentClassName="pl-6"
+                defaultOpen={false}
+              >
+                <WorkflowTimeline events={currentTask.historyEvents} memberColorMap={colorMap} />
+              </CollapsibleTeamSection>
+            ) : null}
+
+            {/* Comments */}
             <CollapsibleTeamSection
-              key={`task-logs:${currentTask.id}`}
-              title="Execution Logs"
-              icon={<ScrollText size={14} />}
-              headerExtra={
-                logsRefreshing || executionPreviewOnline ? (
-                  <span className="flex items-center gap-2 text-[10px] text-[var(--color-text-muted)]">
-                    {executionPreviewOnline ? (
-                      <span
-                        className="pointer-events-none relative inline-flex size-2 shrink-0"
-                        title="Online"
-                      >
-                        <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-50" />
-                        <span className="relative inline-flex size-2 rounded-full bg-emerald-400" />
-                      </span>
-                    ) : null}
-                    {logsRefreshing ? (
-                      <span className="flex items-center gap-1">
-                        <Loader2 size={10} className="animate-spin" />
-                        Updating...
-                      </span>
-                    ) : null}
-                  </span>
-                ) : null
+              title="Comments"
+              icon={<MessageSquare size={14} />}
+              badge={
+                (currentTask.comments?.length ?? 0) > 0
+                  ? (currentTask.comments?.length ?? 0)
+                  : undefined
               }
-              contentClassName="pl-2.5"
+              contentClassName="overflow-x-visible pl-0"
               headerClassName="-mx-6 w-[calc(100%+3rem)]"
               headerContentClassName="pl-6"
-              defaultOpen={false}
+              defaultOpen
             >
-              <div className="min-w-0">
-                <MemberLogsTab
+              <div className="pl-2.5">
+                <TaskCommentInput
                   teamName={teamName}
                   taskId={currentTask.id}
-                  taskOwner={currentTask.owner}
-                  taskStatus={currentTask.status}
-                  taskWorkIntervals={currentTask.workIntervals}
-                  taskSince={taskSince}
-                  onRefreshingChange={setLogsRefreshing}
-                  // Only show a "latest messages" preview when this task is owned by a subagent.
-                  // For lead-owned tasks, the lead session is a mixed stream (lead + multiple agents),
-                  // so filtering to "just the member messages" is unreliable and easy to mislead.
-                  showSubagentPreview={Boolean(currentTask.owner) && !isLeadOwnedTask}
-                  // Temporary debug option: for lead-owned tasks, show quick preview from lead session.
-                  showLeadPreview={allowLeadExecutionPreview && isLeadOwnedTask}
-                  onPreviewOnlineChange={setExecutionPreviewOnline}
+                  members={members}
+                  replyTo={effectiveReplyTo}
+                  onClearReply={clearReply}
                 />
               </div>
-            </CollapsibleTeamSection>
-          ) : null}
-
-          {blockedByIds.length > 0 ||
-          blocksIds.length > 0 ||
-          relatedIds.length > 0 ||
-          relatedByIds.length > 0 ||
-          kanbanTaskState ? (
-            <div className="space-y-2">
-              {/* Dependencies */}
-              {blockedByIds.length > 0 ? (
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <span className="inline-flex items-center gap-0.5 text-xs text-yellow-300">
-                    <ArrowLeftFromLine size={12} />
-                    Blocked by
-                  </span>
-                  {blockedByIds.map((id) => {
-                    const depTask = taskMap.get(id);
-                    const isCompleted = depTask?.status === 'completed';
-                    return (
-                      <button
-                        key={id}
-                        type="button"
-                        className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
-                          isCompleted
-                            ? 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25'
-                            : 'bg-yellow-500/15 text-yellow-300 hover:bg-yellow-500/25'
-                        } cursor-pointer`}
-                        title={
-                          depTask
-                            ? `${formatTaskDisplayLabel(depTask)}: ${depTask.subject}`
-                            : `#${deriveTaskDisplayId(id)}`
-                        }
-                        onClick={() => handleDependencyClick(id)}
-                      >
-                        {depTask ? formatTaskDisplayLabel(depTask) : `#${deriveTaskDisplayId(id)}`}
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : null}
-
-              {blocksIds.length > 0 ? (
-                <div className="flex flex-wrap items-center gap-1.5">
-                  <span className="inline-flex items-center gap-0.5 text-xs text-blue-400">
-                    <ArrowRightFromLine size={12} />
-                    Blocks
-                  </span>
-                  {blocksIds.map((id) => {
-                    const depTask = taskMap.get(id);
-                    const isCompleted = depTask?.status === 'completed';
-                    return (
-                      <button
-                        key={id}
-                        type="button"
-                        className={`inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium transition-colors ${
-                          isCompleted
-                            ? 'bg-emerald-500/15 text-emerald-400 hover:bg-emerald-500/25'
-                            : 'bg-blue-500/15 text-blue-400 hover:bg-blue-500/25'
-                        } cursor-pointer`}
-                        title={
-                          depTask
-                            ? `${formatTaskDisplayLabel(depTask)}: ${depTask.subject}`
-                            : `#${deriveTaskDisplayId(id)}`
-                        }
-                        onClick={() => handleDependencyClick(id)}
-                      >
-                        {depTask ? formatTaskDisplayLabel(depTask) : `#${deriveTaskDisplayId(id)}`}
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : null}
-
-              {/* Review info */}
-              {kanbanTaskState ? (
-                <div className="flex items-center gap-2">
-                  {kanbanTaskState.reviewer ? (
-                    <span className="text-xs text-[var(--color-text-secondary)]">
-                      Reviewer: {kanbanTaskState.reviewer}
-                    </span>
-                  ) : null}
-                  {kanbanTaskState.errorDescription ? (
-                    <span className="text-xs text-red-400">{kanbanTaskState.errorDescription}</span>
-                  ) : null}
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-
-          {/* Workflow History */}
-          {currentTask.historyEvents && currentTask.historyEvents.length > 0 ? (
-            <CollapsibleTeamSection
-              title="Workflow History"
-              icon={<History size={14} />}
-              badge={currentTask.historyEvents.length}
-              contentClassName="pl-2.5"
-              headerClassName="-mx-6 w-[calc(100%+3rem)]"
-              headerContentClassName="pl-6"
-              defaultOpen={false}
-            >
-              <WorkflowTimeline events={currentTask.historyEvents} memberColorMap={colorMap} />
-            </CollapsibleTeamSection>
-          ) : null}
-
-          {/* Comments */}
-          <CollapsibleTeamSection
-            title="Comments"
-            icon={<MessageSquare size={14} />}
-            badge={
-              (currentTask.comments?.length ?? 0) > 0
-                ? (currentTask.comments?.length ?? 0)
-                : undefined
-            }
-            contentClassName="overflow-x-visible pl-0"
-            headerClassName="-mx-6 w-[calc(100%+3rem)]"
-            headerContentClassName="pl-6"
-            defaultOpen
-          >
-            <div className="pl-2.5">
-              <TaskCommentInput
+              <TaskCommentsSection
                 teamName={teamName}
                 taskId={currentTask.id}
+                comments={currentTask.comments ?? []}
                 members={members}
-                replyTo={effectiveReplyTo}
-                onClearReply={clearReply}
+                hideHeader
+                hideInput
+                onReply={handleReply}
+                onTaskIdClick={
+                  onScrollToTask ? (taskId) => handleDependencyClick(taskId) : undefined
+                }
+                containerClassName="-mx-6"
+                unreadCommentIds={unreadSnapshotRef.current}
               />
-            </div>
-            <TaskCommentsSection
-              teamName={teamName}
-              taskId={currentTask.id}
-              comments={currentTask.comments ?? []}
-              members={members}
-              hideHeader
-              hideInput
-              onReply={handleReply}
-              onTaskIdClick={onScrollToTask ? (taskId) => handleDependencyClick(taskId) : undefined}
-              containerClassName="-mx-6"
-              unreadCommentIds={unreadSnapshotRef.current}
-            />
-          </CollapsibleTeamSection>
+            </CollapsibleTeamSection>
+          </div>
         </LightboxLockProvider>
       </DialogContent>
     </Dialog>
diff --git a/src/renderer/components/team/kanban/KanbanColumn.tsx b/src/renderer/components/team/kanban/KanbanColumn.tsx
index ee64132a..27623609 100644
--- a/src/renderer/components/team/kanban/KanbanColumn.tsx
+++ b/src/renderer/components/team/kanban/KanbanColumn.tsx
@@ -50,7 +50,7 @@ export const KanbanColumn = ({
           </Badge>
         </div>
       </header>
-      <div className={cn('flex max-h-[480px] flex-col overflow-auto p-2', bodyClassName)}>
+      <div className={cn('flex max-h-[480px] flex-col gap-1.5 overflow-auto p-2', bodyClassName)}>
         {children}
       </div>
     </section>
diff --git a/src/renderer/components/team/messages/MessageComposer.tsx b/src/renderer/components/team/messages/MessageComposer.tsx
index c9421668..12382df6 100644
--- a/src/renderer/components/team/messages/MessageComposer.tsx
+++ b/src/renderer/components/team/messages/MessageComposer.tsx
@@ -245,6 +245,12 @@ export const MessageComposer = ({
   // Track whether we initiated a send — clear draft only on confirmed success
   const pendingSendRef = useRef(false);
 
+  const handleCycleActionMode = useCallback(() => {
+    const modes: ActionMode[] = canDelegate ? ['do', 'ask', 'delegate'] : ['do', 'ask'];
+    const idx = modes.indexOf(actionMode);
+    setActionMode(modes[(idx + 1) % modes.length]);
+  }, [actionMode, canDelegate, setActionMode]);
+
   const handleSend = useCallback(() => {
     if (!canSend) return;
     dismissMentionsRef.current?.();
@@ -835,6 +841,7 @@ export const MessageComposer = ({
         projectPath={projectPath}
         onFileChipInsert={draft.addChip}
         onModEnter={handleSend}
+        onShiftTab={handleCycleActionMode}
         dismissMentionsRef={dismissMentionsRef}
         minRows={2}
         maxRows={6}
diff --git a/src/renderer/components/ui/MentionSuggestionList.tsx b/src/renderer/components/ui/MentionSuggestionList.tsx
index 78bf854d..eed589bb 100644
--- a/src/renderer/components/ui/MentionSuggestionList.tsx
+++ b/src/renderer/components/ui/MentionSuggestionList.tsx
@@ -214,7 +214,12 @@ export const MentionSuggestionList = ({
           />
         ) : null}
         {s.subtitle && !isTask ? (
-          <span className="truncate text-[var(--color-text-muted)]">{s.subtitle}</span>
+          <span
+            className="truncate text-[var(--color-text-muted)]"
+            style={isFileOrFolder ? { direction: 'rtl', textAlign: 'left' } : undefined}
+          >
+            {isFileOrFolder ? '\u200E' + s.subtitle : s.subtitle}
+          </span>
         ) : null}
       </li>
     );
diff --git a/src/renderer/components/ui/MentionableTextarea.tsx b/src/renderer/components/ui/MentionableTextarea.tsx
index 1056237d..ed8cba1e 100644
--- a/src/renderer/components/ui/MentionableTextarea.tsx
+++ b/src/renderer/components/ui/MentionableTextarea.tsx
@@ -287,9 +287,9 @@ function parseSegments(
 // Default fallback color for mentions without a team color
 const DEFAULT_MENTION_BG = 'rgba(59, 130, 246, 0.15)';
 const DEFAULT_MENTION_TEXT = '#60a5fa';
-const URL_BADGE_BG = 'rgba(37, 99, 235, 0.12)';
-const URL_BADGE_BORDER = 'rgba(96, 165, 250, 0.22)';
-const URL_BADGE_TEXT = '#bfdbfe';
+const URL_BADGE_BG = 'var(--url-badge-bg)';
+const URL_BADGE_BORDER = 'var(--url-badge-border)';
+const URL_BADGE_TEXT = 'var(--url-badge-text)';
 
 // ---------------------------------------------------------------------------
 // Component
@@ -324,6 +324,8 @@ interface MentionableTextareaProps extends Omit<
   taskSuggestions?: MentionSuggestion[];
   /** Called when Enter (without Shift) is pressed. */
   onModEnter?: () => void;
+  /** Called when Shift+Tab is pressed. */
+  onShiftTab?: () => void;
   /** Ref that receives the dismiss callback to close mention dropdown from outside */
   dismissMentionsRef?: React.MutableRefObject<(() => void) | null>;
 }
@@ -346,6 +348,7 @@ export const MentionableTextarea = React.forwardRef<HTMLTextAreaElement, Mention
       teamSuggestions = [],
       taskSuggestions = [],
       onModEnter,
+      onShiftTab,
       dismissMentionsRef,
       style,
       className,
@@ -823,6 +826,12 @@ export const MentionableTextarea = React.forwardRef<HTMLTextAreaElement, Mention
           });
           if (e.defaultPrevented) return;
         }
+        // Shift+Tab → cycle action mode
+        if (e.key === 'Tab' && e.shiftKey && onShiftTab) {
+          e.preventDefault();
+          onShiftTab();
+          return;
+        }
         // Enter (without Shift) → submit; Shift+Enter → newline
         if (e.key === 'Enter' && !e.shiftKey && onModEnter) {
           e.preventDefault();
@@ -834,6 +843,7 @@ export const MentionableTextarea = React.forwardRef<HTMLTextAreaElement, Mention
       },
       [
         onModEnter,
+        onShiftTab,
         handleChipKeyDown,
         mentionHandleKeyDown,
         isOpen,
@@ -1030,14 +1040,14 @@ export const MentionableTextarea = React.forwardRef<HTMLTextAreaElement, Mention
                   return (
                     <span
                       key={idx}
-                      className="inline-flex max-w-full items-center rounded-full px-1.5 py-0 align-baseline text-[0.92em] font-medium"
                       style={{
                         backgroundColor: URL_BADGE_BG,
                         color: URL_BADGE_TEXT,
+                        borderRadius: '4px',
                         boxShadow: `inset 0 0 0 1px ${URL_BADGE_BORDER}`,
                       }}
                     >
-                      <span className="truncate">{seg.value}</span>
+                      {seg.value}
                     </span>
                   );
                 }
diff --git a/src/renderer/components/ui/badge.tsx b/src/renderer/components/ui/badge.tsx
index 1336d2fa..d11e0f3e 100644
--- a/src/renderer/components/ui/badge.tsx
+++ b/src/renderer/components/ui/badge.tsx
@@ -25,9 +25,12 @@ const badgeVariants = cva(
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
 
-const Badge = ({ className, variant, ...props }: BadgeProps): React.JSX.Element => {
-  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
-};
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant, ...props }, ref) => {
+    return <span ref={ref} className={cn(badgeVariants({ variant }), className)} {...props} />;
+  }
+);
+Badge.displayName = 'Badge';
 
 // eslint-disable-next-line react-refresh/only-export-components -- Standard shadcn export pattern
 export { Badge, badgeVariants };
diff --git a/src/renderer/index.css b/src/renderer/index.css
index cfd72c0a..c49636dc 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -72,6 +72,10 @@
   /* Inline code */
   --inline-code-bg: rgba(148, 163, 184, 0.08);
   --inline-code-text: #e2e8f0;
+  /* URL badge (textarea overlay) */
+  --url-badge-bg: rgba(37, 99, 235, 0.12);
+  --url-badge-border: rgba(96, 165, 250, 0.22);
+  --url-badge-text: #bfdbfe;
   /* Diff viewer */
   --diff-added-bg: rgba(34, 197, 94, 0.15);
   --diff-added-text: #4ade80;
@@ -440,6 +444,10 @@
   /* Inline code - Warm neutral */
   --inline-code-bg: rgba(0, 0, 0, 0.05);
   --inline-code-text: #3a3935;
+  /* URL badge (textarea overlay) - Light mode */
+  --url-badge-bg: rgba(37, 99, 235, 0.1);
+  --url-badge-border: rgba(37, 99, 235, 0.25);
+  --url-badge-text: #1d4ed8;
   /* Diff viewer - Light mode */
   --diff-added-bg: rgba(34, 197, 94, 0.18);
   --diff-added-text: #14532d;