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.
This commit is contained in:
iliya
parent
ce28f725f9
commit
0b5d4b41f1
9 changed files with 483 additions and 418 deletions
|
|
@ -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}`,
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue