From c324e2e602cfbc94bfe62d99157d5de46d54eeb0 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 13:40:49 +1100
Subject: [PATCH 1/7] feat(mark): redesign code review subtitle with badges and
 type-specific icons

Show time first in the timeline, then comment counts as round-rect
badges with icons instead of text. Annotations are only shown when
there are no comments. Use comment-type-specific icons (warning,
suggestion, issue, info) consistently across the timeline, diff
sidepanel comment list, and file tree indicators.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../features/diff/DiffCommentsSection.svelte  | 43 ++++++++++++++++---
 .../features/diff/DiffFileTreeSection.svelte  | 40 ++++++++++++++++-
 .../features/timeline/BranchTimeline.svelte   | 31 +++++++------
 .../lib/features/timeline/TimelineRow.svelte  | 35 ++++++++++++++-
 .../src/lib/utils/diffModalHelpers.ts         | 14 +++++-
 5 files changed, 141 insertions(+), 22 deletions(-)

diff --git a/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte b/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
index 1e7d1032..9fe331dc 100644
--- a/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
+++ b/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
@@ -1,5 +1,14 @@
 <script lang="ts">
-  import { Bot, Check, Copy, MessageSquare, Trash2 } from 'lucide-svelte';
+  import {
+    AlertTriangle,
+    Check,
+    CircleAlert,
+    Copy,
+    Info,
+    Lightbulb,
+    MessageSquare,
+    Trash2,
+  } from 'lucide-svelte';
   import type { Comment } from '../../types';
   import { formatLineRange, truncateText } from './diffModalHelpers';
 
@@ -68,9 +77,21 @@
             style="padding-left: 8px"
             onclick={() => onSelectComment(comment)}
           >
-            <span class="comment-icon" class:agent-comment={comment.author === 'agent'}>
-              {#if comment.author === 'agent'}
-                <Bot size={12} />
+            <span
+              class="comment-icon"
+              class:comment-icon-warning={comment.commentType === 'warning'}
+              class:comment-icon-suggestion={comment.commentType === 'suggestion'}
+              class:comment-icon-issue={comment.commentType === 'issue'}
+              class:comment-icon-info={comment.commentType === 'information'}
+            >
+              {#if comment.commentType === 'warning'}
+                <AlertTriangle size={12} />
+              {:else if comment.commentType === 'suggestion'}
+                <Lightbulb size={12} />
+              {:else if comment.commentType === 'issue'}
+                <CircleAlert size={12} />
+              {:else if comment.commentType === 'information'}
+                <Info size={12} />
               {:else}
                 <MessageSquare size={12} />
               {/if}
@@ -231,10 +252,22 @@
     color: var(--text-faint);
   }
 
-  .comment-icon.agent-comment {
+  .comment-icon.comment-icon-warning {
     color: var(--status-modified);
   }
 
+  .comment-icon.comment-icon-suggestion {
+    color: var(--status-added);
+  }
+
+  .comment-icon.comment-icon-issue {
+    color: var(--status-deleted);
+  }
+
+  .comment-icon.comment-icon-info {
+    color: var(--text-accent);
+  }
+
   .comment-details {
     display: flex;
     flex-direction: column;
diff --git a/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte b/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
index 6127198b..e6c25557 100644
--- a/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
+++ b/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import {
+    AlertTriangle,
     Check,
+    CircleAlert,
+    Info,
+    Lightbulb,
     RotateCcw,
     ChevronRight,
     ChevronDown,
@@ -228,7 +232,25 @@
           {@render fileIcon(node.file, showReviewedSection)}
           <span class="file-name">{node.name}</span>
           {#if node.file.commentCount > 0}
-            <span class="comment-indicator"><MessageSquare size={12} /></span>
+            <span
+              class="comment-indicator"
+              class:comment-indicator-warning={node.file.commentTypes.includes('warning')}
+              class:comment-indicator-suggestion={node.file.commentTypes.includes('suggestion')}
+              class:comment-indicator-issue={node.file.commentTypes.includes('issue')}
+              class:comment-indicator-info={node.file.commentTypes.includes('information')}
+            >
+              {#if node.file.commentTypes.includes('issue')}
+                <CircleAlert size={12} />
+              {:else if node.file.commentTypes.includes('warning')}
+                <AlertTriangle size={12} />
+              {:else if node.file.commentTypes.includes('suggestion')}
+                <Lightbulb size={12} />
+              {:else if node.file.commentTypes.includes('information')}
+                <Info size={12} />
+              {:else}
+                <MessageSquare size={12} />
+              {/if}
+            </span>
           {/if}
           {#if searchState?.state.isOpen && searchState.state.fileResults.has(node.file.path)}
             {@const resultCount =
@@ -525,4 +547,20 @@
     margin-left: auto;
     padding-left: 4px;
   }
+
+  .comment-indicator.comment-indicator-warning {
+    color: var(--status-modified);
+  }
+
+  .comment-indicator.comment-indicator-suggestion {
+    color: var(--status-added);
+  }
+
+  .comment-indicator.comment-indicator-issue {
+    color: var(--status-deleted);
+  }
+
+  .comment-indicator.comment-indicator-info {
+    color: var(--text-accent);
+  }
 </style>
diff --git a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
index 77a4e3a3..73cbe680 100644
--- a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
@@ -11,7 +11,7 @@
   import { FileText, GitCommitVertical, FileSearch } from 'lucide-svelte';
   import type { BranchTimeline as BranchTimelineData } from '../../types';
   import TimelineRow from './TimelineRow.svelte';
-  import type { TimelineItemType } from './TimelineRow.svelte';
+  import type { TimelineItemType, TimelineBadge } from './TimelineRow.svelte';
   import {
     collectRunningSessionIds,
     createLiveSessionHints,
@@ -113,6 +113,7 @@
     reviewId?: string;
     imageId?: string;
     imageFilename?: string;
+    badges?: TimelineBadge[];
     /** When set, delete button is shown but disabled with this tooltip. */
     deleteDisabledReason?: string;
   };
@@ -122,10 +123,6 @@
     return text.replace(/<(action|branch-history)>[\s\S]*?<\/\1>/g, '').trim();
   }
 
-  function formatCount(count: number, singular: string): string {
-    return `${count} ${singular}${count === 1 ? '' : 's'}`;
-  }
-
   let runningSessionIds = $derived.by(() => collectRunningSessionIds(timeline, pendingItems));
 
   $effect(() => {
@@ -233,30 +230,35 @@
       const isFailed = !isRunning && !!review.sessionId && totalCount === 0;
       const isDeleting = deletingReviewIds.has(review.id);
       const liveHint = review.sessionId ? liveSessionHints[review.sessionId] : undefined;
-      const countParts: string[] = [];
-      if (commentCount > 0) countParts.push(formatCount(commentCount, 'comment'));
-      if (annotationCount > 0) countParts.push(formatCount(annotationCount, 'annotation'));
+
+      // Build badges: show comments badge if any; only show annotations if no comments
+      const badges: TimelineBadge[] = [];
+      if (commentCount > 0) {
+        badges.push({ icon: 'comment', count: commentCount });
+      } else if (annotationCount > 0) {
+        badges.push({ icon: 'annotation', count: annotationCount });
+      }
 
       let type: TimelineItemType;
-      let secondaryMeta: string | undefined;
+      let meta: string | undefined;
 
       if (isFailed) {
         type = 'failed-review';
-        secondaryMeta = 'Session finished — no comments created';
+        meta = 'Session finished — no comments created';
       } else if (isRunning) {
         type = 'generating-review';
-        secondaryMeta = liveHint ?? 'Generating review';
+        meta = liveHint ?? 'Generating review';
       } else {
         type = 'review';
-        secondaryMeta = formatRelativeTimeMs(review.createdAt);
+        meta = formatRelativeTimeMs(review.createdAt);
       }
 
       all.push({
         key: `review-${review.id}`,
         type,
         title: review.title || 'Code Review',
-        meta: countParts.length > 0 ? countParts.join(' + ') : undefined,
-        secondaryMeta: isDeleting ? 'Deleting...' : secondaryMeta,
+        meta: isDeleting ? 'Deleting...' : meta,
+        badges: badges.length > 0 ? badges : undefined,
         deleting: isDeleting,
         timestamp: Math.floor(review.createdAt / 1000),
         sessionId: review.sessionId ?? undefined,
@@ -418,6 +420,7 @@
         title={item.title}
         meta={item.meta}
         secondaryMeta={item.secondaryMeta}
+        badges={item.badges}
         deleting={item.deleting}
         isLast={index === items.length - 1 &&
           !onNewNote &&
diff --git a/apps/mark/src/lib/features/timeline/TimelineRow.svelte b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
index e427deea..27590ced 100644
--- a/apps/mark/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
@@ -11,6 +11,7 @@
     FileSearch,
     Image as ImageLucide,
     MessageSquare,
+    Info,
     Trash2,
     AlertTriangle,
   } from 'lucide-svelte';
@@ -28,11 +29,17 @@
     | 'failed-review'
     | 'image';
 
+  export type TimelineBadge = {
+    icon: 'comment' | 'annotation';
+    count: number;
+  };
+
   interface Props {
     type: TimelineItemType;
     title: string;
     meta?: string;
     secondaryMeta?: string;
+    badges?: TimelineBadge[];
     deleting?: boolean;
     isLast?: boolean;
     sessionId?: string;
@@ -48,6 +55,7 @@
     title,
     meta,
     secondaryMeta,
+    badges,
     deleting = false,
     isLast = false,
     sessionId,
@@ -134,7 +142,7 @@
       <span class="timeline-title" class:skeleton-title={isPending} class:failed-title={isFailed}
         >{title}</span
       >
-      {#if meta || secondaryMeta}
+      {#if meta || secondaryMeta || (badges && badges.length > 0)}
         <div class="timeline-meta">
           {#if meta}
             <span class="meta-item">{meta}</span>
@@ -142,6 +150,18 @@
           {#if secondaryMeta}
             <span class="meta-item meta-sha" class:failed-meta={isFailed}>{secondaryMeta}</span>
           {/if}
+          {#if badges}
+            {#each badges as badge}
+              <span class="meta-badge">
+                {#if badge.icon === 'comment'}
+                  <MessageSquare size={10} />
+                {:else}
+                  <Info size={10} />
+                {/if}
+                <span>{badge.count}</span>
+              </span>
+            {/each}
+          {/if}
         </div>
       {/if}
     </div>
@@ -332,6 +352,19 @@
     font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
   }
 
+  .meta-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 1px 6px;
+    border-radius: 8px;
+    background-color: var(--bg-elevated);
+    color: var(--text-muted);
+    font-size: calc(var(--size-xs) - 1px);
+    font-weight: 600;
+    line-height: 1;
+  }
+
   /* Actions container — visible on row hover */
   .timeline-actions {
     display: flex;
diff --git a/packages/diff-viewer/src/lib/utils/diffModalHelpers.ts b/packages/diff-viewer/src/lib/utils/diffModalHelpers.ts
index 2193f56e..55e83c36 100644
--- a/packages/diff-viewer/src/lib/utils/diffModalHelpers.ts
+++ b/packages/diff-viewer/src/lib/utils/diffModalHelpers.ts
@@ -1,4 +1,4 @@
-import type { Comment, FileDiffSummary } from '../types';
+import type { Comment, CommentType, FileDiffSummary } from '../types';
 import { fileSummaryPath } from '../state/diffViewerState.svelte';
 
 export interface FileEntry {
@@ -6,6 +6,8 @@ export interface FileEntry {
   status: 'added' | 'deleted' | 'modified' | 'renamed';
   isReviewed: boolean;
   commentCount: number;
+  /** The distinct comment types present on this file (e.g. 'warning', 'suggestion'). */
+  commentTypes: CommentType[];
 }
 
 export interface TreeNode {
@@ -30,8 +32,17 @@ export function buildFileEntries(
 ): FileEntry[] {
   const reviewedSet = new Set(reviewedPaths);
   const commentCounts = new Map<string, number>();
+  const commentTypesByFile = new Map<string, Set<CommentType>>();
   for (const comment of comments) {
     commentCounts.set(comment.path, (commentCounts.get(comment.path) || 0) + 1);
+    if (comment.commentType) {
+      let types = commentTypesByFile.get(comment.path);
+      if (!types) {
+        types = new Set();
+        commentTypesByFile.set(comment.path, types);
+      }
+      types.add(comment.commentType);
+    }
   }
 
   return files.map((summary) => {
@@ -41,6 +52,7 @@ export function buildFileEntries(
       status: fileStatus(summary),
       isReviewed: reviewedSet.has(path),
       commentCount: commentCounts.get(path) || 0,
+      commentTypes: [...(commentTypesByFile.get(path) || [])],
     };
   });
 }

From afbec6a78ff5af963df564e2aba3afeeeb8ffaa1 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 14:36:03 +1100
Subject: [PATCH 2/7] style(mark): show both comment/annotation badges with
 outline style

Show comment and annotation counts as separate badges instead of
either/or. Switch badges to outline style (border instead of fill),
add more padding, and use align-items: center for proper vertical
alignment with the time label.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/mark/src/lib/features/timeline/BranchTimeline.svelte | 5 +++--
 apps/mark/src/lib/features/timeline/TimelineRow.svelte    | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
index 73cbe680..ab065a99 100644
--- a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
@@ -231,11 +231,12 @@
       const isDeleting = deletingReviewIds.has(review.id);
       const liveHint = review.sessionId ? liveSessionHints[review.sessionId] : undefined;
 
-      // Build badges: show comments badge if any; only show annotations if no comments
+      // Build badges: show both comment and annotation counts when present
       const badges: TimelineBadge[] = [];
       if (commentCount > 0) {
         badges.push({ icon: 'comment', count: commentCount });
-      } else if (annotationCount > 0) {
+      }
+      if (annotationCount > 0) {
         badges.push({ icon: 'annotation', count: annotationCount });
       }
 
diff --git a/apps/mark/src/lib/features/timeline/TimelineRow.svelte b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
index 27590ced..96f5ffcc 100644
--- a/apps/mark/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
@@ -338,7 +338,7 @@
 
   .timeline-meta {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     gap: 8px;
     margin-top: 3px;
   }
@@ -356,9 +356,10 @@
     display: inline-flex;
     align-items: center;
     gap: 3px;
-    padding: 1px 6px;
+    padding: 2px 7px;
     border-radius: 8px;
-    background-color: var(--bg-elevated);
+    background: none;
+    border: 1px solid var(--border-subtle);
     color: var(--text-muted);
     font-size: calc(var(--size-xs) - 1px);
     font-weight: 600;

From 6f977120bd73e2e7427fd5b2c90ab7f86875b36b Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 15:01:10 +1100
Subject: [PATCH 3/7] fix(mark): use consistent type-specific icons in timeline
 badges and diff UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show per-type badges (warning, suggestion, issue, comment, annotation)
in the branch timeline instead of generic comment/annotation badges.
Each badge uses the same icon and color as the diff sidepanel and file
tree: AlertTriangle for warnings, Lightbulb for suggestions, CircleAlert
for issues, MessageSquare for plain comments, and Info for annotations.

Also fix CSS specificity bug in DiffFileTreeSection where the rule order
(warning → suggestion → issue → info) didn't match the icon priority
(issue > warning > suggestion > info), causing a color/icon mismatch
when multiple comment types were present on the same file. Reorder rules
so the highest-priority type's color wins.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../lib/features/branches/BranchCard.svelte   | 16 +++++++
 .../features/diff/DiffFileTreeSection.svelte  | 14 +++---
 .../features/timeline/BranchTimeline.svelte   | 32 ++++++++++++--
 .../lib/features/timeline/TimelineRow.svelte  | 44 ++++++++++++++++---
 4 files changed, 91 insertions(+), 15 deletions(-)

diff --git a/apps/mark/src/lib/features/branches/BranchCard.svelte b/apps/mark/src/lib/features/branches/BranchCard.svelte
index b6a3b766..834ddb48 100644
--- a/apps/mark/src/lib/features/branches/BranchCard.svelte
+++ b/apps/mark/src/lib/features/branches/BranchCard.svelte
@@ -309,6 +309,9 @@
     scope: 'branch' | 'commit';
     comments: number;
     annotations: number;
+    warnings: number;
+    suggestions: number;
+    issues: number;
   };
   let timelineReviewDetailsById = $state<Record<string, TimelineReviewDetails>>({});
   let reviewDetailsLoadVersion = 0;
@@ -864,11 +867,21 @@
 
           let comments = 0;
           let annotations = 0;
+          let warnings = 0;
+          let suggestions = 0;
+          let issues = 0;
           for (const comment of fullReview.comments) {
             if (comment.commentType === 'information') {
               annotations += 1;
             } else {
               comments += 1;
+              if (comment.commentType === 'warning') {
+                warnings += 1;
+              } else if (comment.commentType === 'suggestion') {
+                suggestions += 1;
+              } else if (comment.commentType === 'issue') {
+                issues += 1;
+              }
             }
           }
 
@@ -877,6 +890,9 @@
             scope: fullReview.scope,
             comments,
             annotations,
+            warnings,
+            suggestions,
+            issues,
           };
           return { id: review.id, details };
         } catch (e) {
diff --git a/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte b/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
index e6c25557..667ef929 100644
--- a/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
+++ b/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
@@ -548,19 +548,21 @@
     padding-left: 4px;
   }
 
-  .comment-indicator.comment-indicator-warning {
-    color: var(--status-modified);
+  /* CSS order matches icon priority (issue > warning > suggestion > info)
+     so the last matching rule wins for color, matching the displayed icon. */
+  .comment-indicator.comment-indicator-info {
+    color: var(--text-accent);
   }
 
   .comment-indicator.comment-indicator-suggestion {
     color: var(--status-added);
   }
 
-  .comment-indicator.comment-indicator-issue {
-    color: var(--status-deleted);
+  .comment-indicator.comment-indicator-warning {
+    color: var(--status-modified);
   }
 
-  .comment-indicator.comment-indicator-info {
-    color: var(--text-accent);
+  .comment-indicator.comment-indicator-issue {
+    color: var(--status-deleted);
   }
 </style>
diff --git a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
index ab065a99..8851ae5d 100644
--- a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
@@ -48,7 +48,16 @@
     onDeleteReview?: (reviewId: string, sessionId?: string) => void;
     onDeleteImage?: (imageId: string) => void;
     /** Optional per-review breakdown of visible comments vs hold-to-reveal annotations. */
-    reviewCommentBreakdown?: Record<string, { comments: number; annotations: number }>;
+    reviewCommentBreakdown?: Record<
+      string,
+      {
+        comments: number;
+        annotations: number;
+        warnings?: number;
+        suggestions?: number;
+        issues?: number;
+      }
+    >;
     onNewNote?: () => void;
     onNewCommit?: () => void;
     onNewReview?: (e: MouseEvent) => void;
@@ -231,10 +240,25 @@
       const isDeleting = deletingReviewIds.has(review.id);
       const liveHint = review.sessionId ? liveSessionHints[review.sessionId] : undefined;
 
-      // Build badges: show both comment and annotation counts when present
+      // Build per-type badges matching the icons used in the diff UI
+      const warningCount = breakdown?.warnings ?? 0;
+      const suggestionCount = breakdown?.suggestions ?? 0;
+      const issueCount = breakdown?.issues ?? 0;
+      // Comments without a specific type (user comments, or untyped agent comments)
+      const plainCommentCount = commentCount - warningCount - suggestionCount - issueCount;
+
       const badges: TimelineBadge[] = [];
-      if (commentCount > 0) {
-        badges.push({ icon: 'comment', count: commentCount });
+      if (issueCount > 0) {
+        badges.push({ icon: 'issue', count: issueCount });
+      }
+      if (warningCount > 0) {
+        badges.push({ icon: 'warning', count: warningCount });
+      }
+      if (suggestionCount > 0) {
+        badges.push({ icon: 'suggestion', count: suggestionCount });
+      }
+      if (plainCommentCount > 0) {
+        badges.push({ icon: 'comment', count: plainCommentCount });
       }
       if (annotationCount > 0) {
         badges.push({ icon: 'annotation', count: annotationCount });
diff --git a/apps/mark/src/lib/features/timeline/TimelineRow.svelte b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
index 96f5ffcc..28c9ff48 100644
--- a/apps/mark/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
@@ -14,6 +14,8 @@
     Info,
     Trash2,
     AlertTriangle,
+    CircleAlert,
+    Lightbulb,
   } from 'lucide-svelte';
   import Spinner from '../../shared/Spinner.svelte';
 
@@ -30,7 +32,7 @@
     | 'image';
 
   export type TimelineBadge = {
-    icon: 'comment' | 'annotation';
+    icon: 'comment' | 'warning' | 'suggestion' | 'issue' | 'annotation';
     count: number;
   };
 
@@ -152,11 +154,23 @@
           {/if}
           {#if badges}
             {#each badges as badge}
-              <span class="meta-badge">
-                {#if badge.icon === 'comment'}
-                  <MessageSquare size={10} />
-                {:else}
+              <span
+                class="meta-badge"
+                class:meta-badge-warning={badge.icon === 'warning'}
+                class:meta-badge-suggestion={badge.icon === 'suggestion'}
+                class:meta-badge-issue={badge.icon === 'issue'}
+                class:meta-badge-annotation={badge.icon === 'annotation'}
+              >
+                {#if badge.icon === 'warning'}
+                  <AlertTriangle size={10} />
+                {:else if badge.icon === 'suggestion'}
+                  <Lightbulb size={10} />
+                {:else if badge.icon === 'issue'}
+                  <CircleAlert size={10} />
+                {:else if badge.icon === 'annotation'}
                   <Info size={10} />
+                {:else}
+                  <MessageSquare size={10} />
                 {/if}
                 <span>{badge.count}</span>
               </span>
@@ -366,6 +380,26 @@
     line-height: 1;
   }
 
+  .meta-badge.meta-badge-warning {
+    color: var(--status-modified);
+    border-color: var(--status-modified);
+  }
+
+  .meta-badge.meta-badge-suggestion {
+    color: var(--status-added);
+    border-color: var(--status-added);
+  }
+
+  .meta-badge.meta-badge-issue {
+    color: var(--status-deleted);
+    border-color: var(--status-deleted);
+  }
+
+  .meta-badge.meta-badge-annotation {
+    color: var(--text-accent);
+    border-color: var(--text-accent);
+  }
+
   /* Actions container — visible on row hover */
   .timeline-actions {
     display: flex;

From 35db21d9b3ef3387d484b3c9713328e37dd685d4 Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 15:17:39 +1100
Subject: [PATCH 4/7] style(mark): simplify comment icons to just comment and
 warning across all views

Unify icons between the branch timeline badges and the diff UI to use
only two types: MessageSquare for normal comments and AlertTriangle for
warnings. Previously the diff UI used four different type-specific icons
(warning, suggestion, issue, information) while the timeline only had
generic comment/annotation badges.

Now both places use the same two-icon system:
- MessageSquare (comment) for all non-warning comments
- AlertTriangle (warning) for warnings

Remove unused icon imports (CircleAlert, Lightbulb, Info) and their
associated CSS classes from DiffCommentsSection, DiffFileTreeSection,
and TimelineRow.
---
 .../lib/features/branches/BranchCard.svelte   | 10 ------
 .../features/diff/DiffCommentsSection.svelte  | 32 +----------------
 .../features/diff/DiffFileTreeSection.svelte  | 28 +--------------
 .../features/timeline/BranchTimeline.svelte   | 22 +++---------
 .../lib/features/timeline/TimelineRow.svelte  | 34 ++-----------------
 5 files changed, 8 insertions(+), 118 deletions(-)

diff --git a/apps/mark/src/lib/features/branches/BranchCard.svelte b/apps/mark/src/lib/features/branches/BranchCard.svelte
index 834ddb48..1077d7cd 100644
--- a/apps/mark/src/lib/features/branches/BranchCard.svelte
+++ b/apps/mark/src/lib/features/branches/BranchCard.svelte
@@ -310,8 +310,6 @@
     comments: number;
     annotations: number;
     warnings: number;
-    suggestions: number;
-    issues: number;
   };
   let timelineReviewDetailsById = $state<Record<string, TimelineReviewDetails>>({});
   let reviewDetailsLoadVersion = 0;
@@ -868,8 +866,6 @@
           let comments = 0;
           let annotations = 0;
           let warnings = 0;
-          let suggestions = 0;
-          let issues = 0;
           for (const comment of fullReview.comments) {
             if (comment.commentType === 'information') {
               annotations += 1;
@@ -877,10 +873,6 @@
               comments += 1;
               if (comment.commentType === 'warning') {
                 warnings += 1;
-              } else if (comment.commentType === 'suggestion') {
-                suggestions += 1;
-              } else if (comment.commentType === 'issue') {
-                issues += 1;
               }
             }
           }
@@ -891,8 +883,6 @@
             comments,
             annotations,
             warnings,
-            suggestions,
-            issues,
           };
           return { id: review.id, details };
         } catch (e) {
diff --git a/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte b/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
index 9fe331dc..cd7403b2 100644
--- a/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
+++ b/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
@@ -1,14 +1,5 @@
 <script lang="ts">
-  import {
-    AlertTriangle,
-    Check,
-    CircleAlert,
-    Copy,
-    Info,
-    Lightbulb,
-    MessageSquare,
-    Trash2,
-  } from 'lucide-svelte';
+  import { AlertTriangle, Check, Copy, MessageSquare, Trash2 } from 'lucide-svelte';
   import type { Comment } from '../../types';
   import { formatLineRange, truncateText } from './diffModalHelpers';
 
@@ -80,18 +71,9 @@
             <span
               class="comment-icon"
               class:comment-icon-warning={comment.commentType === 'warning'}
-              class:comment-icon-suggestion={comment.commentType === 'suggestion'}
-              class:comment-icon-issue={comment.commentType === 'issue'}
-              class:comment-icon-info={comment.commentType === 'information'}
             >
               {#if comment.commentType === 'warning'}
                 <AlertTriangle size={12} />
-              {:else if comment.commentType === 'suggestion'}
-                <Lightbulb size={12} />
-              {:else if comment.commentType === 'issue'}
-                <CircleAlert size={12} />
-              {:else if comment.commentType === 'information'}
-                <Info size={12} />
               {:else}
                 <MessageSquare size={12} />
               {/if}
@@ -256,18 +238,6 @@
     color: var(--status-modified);
   }
 
-  .comment-icon.comment-icon-suggestion {
-    color: var(--status-added);
-  }
-
-  .comment-icon.comment-icon-issue {
-    color: var(--status-deleted);
-  }
-
-  .comment-icon.comment-icon-info {
-    color: var(--text-accent);
-  }
-
   .comment-details {
     display: flex;
     flex-direction: column;
diff --git a/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte b/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
index 667ef929..07d3c17e 100644
--- a/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
+++ b/apps/mark/src/lib/features/diff/DiffFileTreeSection.svelte
@@ -2,9 +2,6 @@
   import {
     AlertTriangle,
     Check,
-    CircleAlert,
-    Info,
-    Lightbulb,
     RotateCcw,
     ChevronRight,
     ChevronDown,
@@ -235,18 +232,9 @@
             <span
               class="comment-indicator"
               class:comment-indicator-warning={node.file.commentTypes.includes('warning')}
-              class:comment-indicator-suggestion={node.file.commentTypes.includes('suggestion')}
-              class:comment-indicator-issue={node.file.commentTypes.includes('issue')}
-              class:comment-indicator-info={node.file.commentTypes.includes('information')}
             >
-              {#if node.file.commentTypes.includes('issue')}
-                <CircleAlert size={12} />
-              {:else if node.file.commentTypes.includes('warning')}
+              {#if node.file.commentTypes.includes('warning')}
                 <AlertTriangle size={12} />
-              {:else if node.file.commentTypes.includes('suggestion')}
-                <Lightbulb size={12} />
-              {:else if node.file.commentTypes.includes('information')}
-                <Info size={12} />
               {:else}
                 <MessageSquare size={12} />
               {/if}
@@ -548,21 +536,7 @@
     padding-left: 4px;
   }
 
-  /* CSS order matches icon priority (issue > warning > suggestion > info)
-     so the last matching rule wins for color, matching the displayed icon. */
-  .comment-indicator.comment-indicator-info {
-    color: var(--text-accent);
-  }
-
-  .comment-indicator.comment-indicator-suggestion {
-    color: var(--status-added);
-  }
-
   .comment-indicator.comment-indicator-warning {
     color: var(--status-modified);
   }
-
-  .comment-indicator.comment-indicator-issue {
-    color: var(--status-deleted);
-  }
 </style>
diff --git a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
index 8851ae5d..3d2562fb 100644
--- a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
@@ -54,8 +54,6 @@
         comments: number;
         annotations: number;
         warnings?: number;
-        suggestions?: number;
-        issues?: number;
       }
     >;
     onNewNote?: () => void;
@@ -240,28 +238,16 @@
       const isDeleting = deletingReviewIds.has(review.id);
       const liveHint = review.sessionId ? liveSessionHints[review.sessionId] : undefined;
 
-      // Build per-type badges matching the icons used in the diff UI
+      // Build badges: warnings get their own badge, everything else is a comment
       const warningCount = breakdown?.warnings ?? 0;
-      const suggestionCount = breakdown?.suggestions ?? 0;
-      const issueCount = breakdown?.issues ?? 0;
-      // Comments without a specific type (user comments, or untyped agent comments)
-      const plainCommentCount = commentCount - warningCount - suggestionCount - issueCount;
+      const nonWarningCount = totalCount - warningCount;
 
       const badges: TimelineBadge[] = [];
-      if (issueCount > 0) {
-        badges.push({ icon: 'issue', count: issueCount });
-      }
       if (warningCount > 0) {
         badges.push({ icon: 'warning', count: warningCount });
       }
-      if (suggestionCount > 0) {
-        badges.push({ icon: 'suggestion', count: suggestionCount });
-      }
-      if (plainCommentCount > 0) {
-        badges.push({ icon: 'comment', count: plainCommentCount });
-      }
-      if (annotationCount > 0) {
-        badges.push({ icon: 'annotation', count: annotationCount });
+      if (nonWarningCount > 0) {
+        badges.push({ icon: 'comment', count: nonWarningCount });
       }
 
       let type: TimelineItemType;
diff --git a/apps/mark/src/lib/features/timeline/TimelineRow.svelte b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
index 28c9ff48..2929c302 100644
--- a/apps/mark/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
@@ -11,11 +11,8 @@
     FileSearch,
     Image as ImageLucide,
     MessageSquare,
-    Info,
     Trash2,
     AlertTriangle,
-    CircleAlert,
-    Lightbulb,
   } from 'lucide-svelte';
   import Spinner from '../../shared/Spinner.svelte';
 
@@ -32,7 +29,7 @@
     | 'image';
 
   export type TimelineBadge = {
-    icon: 'comment' | 'warning' | 'suggestion' | 'issue' | 'annotation';
+    icon: 'comment' | 'warning';
     count: number;
   };
 
@@ -154,21 +151,9 @@
           {/if}
           {#if badges}
             {#each badges as badge}
-              <span
-                class="meta-badge"
-                class:meta-badge-warning={badge.icon === 'warning'}
-                class:meta-badge-suggestion={badge.icon === 'suggestion'}
-                class:meta-badge-issue={badge.icon === 'issue'}
-                class:meta-badge-annotation={badge.icon === 'annotation'}
-              >
+              <span class="meta-badge" class:meta-badge-warning={badge.icon === 'warning'}>
                 {#if badge.icon === 'warning'}
                   <AlertTriangle size={10} />
-                {:else if badge.icon === 'suggestion'}
-                  <Lightbulb size={10} />
-                {:else if badge.icon === 'issue'}
-                  <CircleAlert size={10} />
-                {:else if badge.icon === 'annotation'}
-                  <Info size={10} />
                 {:else}
                   <MessageSquare size={10} />
                 {/if}
@@ -385,21 +370,6 @@
     border-color: var(--status-modified);
   }
 
-  .meta-badge.meta-badge-suggestion {
-    color: var(--status-added);
-    border-color: var(--status-added);
-  }
-
-  .meta-badge.meta-badge-issue {
-    color: var(--status-deleted);
-    border-color: var(--status-deleted);
-  }
-
-  .meta-badge.meta-badge-annotation {
-    color: var(--text-accent);
-    border-color: var(--text-accent);
-  }
-
   /* Actions container — visible on row hover */
   .timeline-actions {
     display: flex;

From 361687c7c688713f8feee4233d618ddd1815156c Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 15:34:56 +1100
Subject: [PATCH 5/7] feat(mark): restore Bot icon for agent-authored comments
 in diff sidebar

Show both the agent icon (Bot) and the comment type icon in the diff
sidebar comment list. Agent-authored comments display a Bot icon in
--status-modified color followed by the type icon (AlertTriangle for
warnings, MessageSquare otherwise). User-authored comments show only
the type icon.

Wrap both icons in a flex container (.comment-icons) and increase
the comment item left padding to accommodate the extra icon width.
---
 .../features/diff/DiffCommentsSection.svelte  | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte b/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
index cd7403b2..e5810171 100644
--- a/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
+++ b/apps/mark/src/lib/features/diff/DiffCommentsSection.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { AlertTriangle, Check, Copy, MessageSquare, Trash2 } from 'lucide-svelte';
+  import { AlertTriangle, Bot, Check, Copy, MessageSquare, Trash2 } from 'lucide-svelte';
   import type { Comment } from '../../types';
   import { formatLineRange, truncateText } from './diffModalHelpers';
 
@@ -68,15 +68,22 @@
             style="padding-left: 8px"
             onclick={() => onSelectComment(comment)}
           >
-            <span
-              class="comment-icon"
-              class:comment-icon-warning={comment.commentType === 'warning'}
-            >
-              {#if comment.commentType === 'warning'}
-                <AlertTriangle size={12} />
-              {:else}
-                <MessageSquare size={12} />
+            <span class="comment-icons">
+              {#if comment.author === 'agent'}
+                <span class="comment-icon agent-icon">
+                  <Bot size={12} />
+                </span>
               {/if}
+              <span
+                class="comment-icon"
+                class:comment-icon-warning={comment.commentType === 'warning'}
+              >
+                {#if comment.commentType === 'warning'}
+                  <AlertTriangle size={12} />
+                {:else}
+                  <MessageSquare size={12} />
+                {/if}
+              </span>
             </span>
             <span class="comment-details">
               <span class="comment-location">
@@ -223,17 +230,29 @@
     gap: 2px !important;
     padding-top: 6px !important;
     padding-bottom: 6px !important;
-    padding-left: 28px !important;
+    padding-left: 40px !important;
     width: 100%;
   }
 
-  .comment-icon {
+  .comment-icons {
     position: absolute;
     left: 8px;
     top: 8px;
+    display: flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .comment-icon {
+    display: flex;
+    align-items: center;
     color: var(--text-faint);
   }
 
+  .comment-icon.agent-icon {
+    color: var(--status-modified);
+  }
+
   .comment-icon.comment-icon-warning {
     color: var(--status-modified);
   }

From b90bf13b62dcafc76603caf93671b146143be31f Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 15:40:04 +1100
Subject: [PATCH 6/7] style(mark): remove warning-specific color from branch
 card badges

Use the same muted color and border for warning badges as regular
comment badges in the branch timeline, instead of highlighting
warnings in --status-modified color.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/mark/src/lib/features/timeline/TimelineRow.svelte | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/mark/src/lib/features/timeline/TimelineRow.svelte b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
index 2929c302..c6226094 100644
--- a/apps/mark/src/lib/features/timeline/TimelineRow.svelte
+++ b/apps/mark/src/lib/features/timeline/TimelineRow.svelte
@@ -151,7 +151,7 @@
           {/if}
           {#if badges}
             {#each badges as badge}
-              <span class="meta-badge" class:meta-badge-warning={badge.icon === 'warning'}>
+              <span class="meta-badge">
                 {#if badge.icon === 'warning'}
                   <AlertTriangle size={10} />
                 {:else}
@@ -365,11 +365,6 @@
     line-height: 1;
   }
 
-  .meta-badge.meta-badge-warning {
-    color: var(--status-modified);
-    border-color: var(--status-modified);
-  }
-
   /* Actions container — visible on row hover */
   .timeline-actions {
     display: flex;

From 2c3d41cca5db9720b1e87df18f6474ed9986cacd Mon Sep 17 00:00:00 2001
From: Matt Toohey <contact@matttoohey.com>
Date: Wed, 11 Mar 2026 15:50:25 +1100
Subject: [PATCH 7/7] fix(mark): exclude annotations from non-warning comment
 badge count

Use commentCount instead of totalCount when computing nonWarningCount
so that hold-to-reveal annotations are not inflated into the comment
badge on the branch timeline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/mark/src/lib/features/timeline/BranchTimeline.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
index 3d2562fb..ef7c94ec 100644
--- a/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
+++ b/apps/mark/src/lib/features/timeline/BranchTimeline.svelte
@@ -240,7 +240,7 @@
 
       // Build badges: warnings get their own badge, everything else is a comment
       const warningCount = breakdown?.warnings ?? 0;
-      const nonWarningCount = totalCount - warningCount;
+      const nonWarningCount = commentCount - warningCount;
 
       const badges: TimelineBadge[] = [];
       if (warningCount > 0) {