Diff hunks + thread context on review comments; preview env links; hide matrix placeholder

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DgBEW6qAwgn2fcQbA2f4ZQ

web/src/components/PrCard.tsx

@@ -20,6 +20,11 @@ export default function PrCard({ pr, unread }: { pr: PrSnapshot; unread: number
           {pr.branch}
         </span>
         <span>{relativeTime(pr.updatedAt)}</span>
+        {pr.previewUrl && (
+          <a className="preview-link" href={pr.previewUrl} target="_blank" rel="noreferrer">
+            preview ↗
+          </a>
+        )}
       </div>
       <div className="chips-row">
         <ReviewBadge pr={pr} />

web/src/components/Timeline.tsx

@@ -62,14 +62,43 @@ function KindLabel({ event }: { event: TimelineEvent }) {
   if (event.kind === 'review_comment') {
     return (
       <span>
-        commented{event.path ? ' on ' : ''}
-        {event.path && <span className="path">{event.path.split('/').pop()}</span>}
+        {event.inReplyTo ? 'replied' : 'commented'}
+        {event.path ? ' on ' : ''}
+        {event.path && (
+          <span className="path" title={event.path}>
+            {event.path.split('/').pop()}
+          </span>
+        )}
       </span>
     );
   }
   return <span>commented</span>;
 }
 
+function DiffHunk({ hunk }: { hunk: string }) {
+  return (
+    <pre className="tl-diff">
+      {hunk.split('\n').map((line, i) => (
+        <span
+          key={i}
+          className={
+            line.startsWith('+')
+              ? 'diff-add'
+              : line.startsWith('-')
+                ? 'diff-del'
+                : line.startsWith('@@')
+                  ? 'diff-meta'
+                  : ''
+          }
+        >
+          {line || ' '}
+          {'\n'}
+        </span>
+      ))}
+    </pre>
+  );
+}
+
 export default function Timeline() {
   const [unreadOnly, setUnreadOnly] = useState(false);
   const queryClient = useQueryClient();
@@ -144,14 +173,18 @@ export default function Timeline() {
                     readMutation.mutate({ id: e.id, read: !e.read });
                   }}
                 />
-                <div>
+                <div className="tl-content">
                   <div className="tl-kind">
                     <KindLabel event={e} />
                   </div>
+                  {e.diffHunk && !e.inReplyTo && <DiffHunk hunk={e.diffHunk} />}
                   {e.inReplyTo && (
-                    <div className="tl-reply-ctx">
-                      ↳ <span className="actor">{e.inReplyTo.actor}</span>:{' '}
-                      {e.inReplyTo.bodyExcerpt}
+                    <div className="tl-thread">
+                      {e.diffHunk && <DiffHunk hunk={e.diffHunk} />}
+                      <div className="tl-reply-ctx">
+                        <span className="actor">{e.inReplyTo.actor}</span>{' '}
+                        {e.inReplyTo.bodyExcerpt}
+                      </div>
                     </div>
                   )}
                   {e.bodyExcerpt && <div className="body">{e.bodyExcerpt}</div>}