Various review overview improvements to align with github

Author: kylecarbs

src/browser/components/pr-overview.tsx

@@ -790,9 +790,16 @@ export const PROverview = memo(function PROverview() {
                     });
                   });
 
-                  // Add reviews with bodies
-                  latestReviews
-                    .filter((r) => r.body && r.submitted_at)
+                  // Add ALL reviews to timeline - show APPROVED/CHANGES_REQUESTED always, COMMENTED only if they have a body
+                  // Note: we use `reviews` not `latestReviews` because latestReviews only keeps one review per user
+                  reviews
+                    .filter(
+                      (r) =>
+                        r.submitted_at &&
+                        (r.body ||
+                          r.state === "APPROVED" ||
+                          r.state === "CHANGES_REQUESTED")
+                    )
                     .forEach((review) => {
                       entries.push({
                         type: "review",
@@ -936,6 +943,8 @@ export const PROverview = memo(function PROverview() {
                         setShowMergeOptions(!showMergeOptions)
                       }
                       onUpdateBranch={handleUpdateBranch}
+                      markingReady={markingReady}
+                      onMarkReadyForReview={handleMarkReadyForReview}
                     />
                     {/* Still in progress - only show if NOT a draft and user can merge */}
                     {canMergeRepo && !pr.draft && (
@@ -1446,24 +1455,6 @@ export const PROverview = memo(function PROverview() {
               canWrite={canMergeRepo}
             />
 
-            {/* Draft - Mark as ready for review */}
-            {canMergeRepo && pr.state === "open" && !pr.merged && pr.draft && (
-              <div className="pt-2 border-t border-border">
-                <p className="text-xs text-muted-foreground mb-1">
-                  This pull request is still a work in progress.
-                </p>
-                <button
-                  onClick={handleMarkReadyForReview}
-                  disabled={markingReady}
-                  className="text-sm text-blue-400 hover:underline disabled:opacity-50"
-                >
-                  {markingReady
-                    ? "Marking ready..."
-                    : "Mark as ready for review"}
-                </button>
-              </div>
-            )}
-
             {/* Participants */}
             <SidebarSection
               title={`${participants.length} participant${participants.length !== 1 ? "s" : ""}`}
@@ -2121,6 +2112,8 @@ function MergeSection({
   onSetMergeMethod,
   onToggleMergeOptions,
   onUpdateBranch,
+  markingReady,
+  onMarkReadyForReview,
 }: {
   pr: {
     draft?: boolean;
@@ -2141,6 +2134,8 @@ function MergeSection({
   onSetMergeMethod: (method: "merge" | "squash" | "rebase") => void;
   onToggleMergeOptions: () => void;
   onUpdateBranch: () => void;
+  markingReady?: boolean;
+  onMarkReadyForReview?: () => void;
 }) {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [dropdownPosition, setDropdownPosition] = useState({
@@ -2518,8 +2513,40 @@ function MergeSection({
         </div>
       </div>
 
-      {/* Merge controls - only show when user can merge */}
-      {canMergeRepo && (
+      {/* Draft section - show when PR is a draft */}
+      {pr.draft && (
+        <div className="p-4">
+          <div className="flex items-start gap-3">
+            <div className="p-2 rounded-full bg-muted text-muted-foreground">
+              <GitPullRequest className="w-5 h-5" />
+            </div>
+            <div className="flex-1">
+              <p className="font-medium text-sm">
+                This pull request is still a work in progress
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Draft pull requests cannot be merged.
+              </p>
+            </div>
+            {canMergeRepo && onMarkReadyForReview && (
+              <button
+                onClick={onMarkReadyForReview}
+                disabled={markingReady}
+                className="px-3 py-1.5 border border-border rounded-md hover:bg-muted transition-colors text-sm font-medium disabled:opacity-50"
+              >
+                {markingReady ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  "Ready for review"
+                )}
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Merge controls - only show when user can merge and PR is not a draft */}
+      {canMergeRepo && !pr.draft && (
         <div className="p-4 space-y-3">
           {mergeError && (
             <p className="text-sm text-destructive">{mergeError}</p>
@@ -3496,6 +3523,34 @@ function TimelineItem({ event, pr }: TimelineItemProps) {
         };
       }
 
+      case "head_ref_force_pushed": {
+        // Timeline API only provides commit_id (the "to" SHA), no "before" SHA
+        const forcePush = event as { commit_id?: string };
+        return {
+          icon: <GitBranch className="w-4 h-4" />,
+          text: (
+            <span>
+              <span className="font-medium">{actor?.login}</span> force-pushed
+              the{" "}
+              <code className="px-1.5 py-0.5 bg-blue-500/20 text-blue-300 rounded text-xs">
+                {pr?.head?.ref || "branch"}
+              </code>{" "}
+              branch
+              {forcePush.commit_id && (
+                <>
+                  {" "}
+                  to{" "}
+                  <code className="px-1.5 py-0.5 bg-muted rounded text-xs font-mono">
+                    {forcePush.commit_id.slice(0, 7)}
+                  </code>
+                </>
+              )}
+            </span>
+          ),
+          color: "text-amber-400",
+        };
+      }
+
       case "merged": {
         const merged = event as { commit_id?: string };
         return {

src/browser/components/pr-review.tsx

@@ -2902,7 +2902,7 @@ const SubmitReviewDropdown = memo(function SubmitReviewDropdown() {
                 <label className="flex items-start gap-3 cursor-pointer group">
                   <RadioGroupItem value="APPROVE" className="mt-0.5" />
                   <div className="flex flex-col gap-0.5">
-                    <span className="font-medium text-sm text-green-500">
+                    <span className="font-medium text-sm text-green-400">
                       Approve
                     </span>
                     <span className="text-xs text-muted-foreground">
@@ -2914,7 +2914,7 @@ const SubmitReviewDropdown = memo(function SubmitReviewDropdown() {
                 <label className="flex items-start gap-3 cursor-pointer group">
                   <RadioGroupItem value="REQUEST_CHANGES" className="mt-0.5" />
                   <div className="flex flex-col gap-0.5">
-                    <span className="font-medium text-sm text-orange-500">
+                    <span className="font-medium text-sm text-amber-400">
                       Request changes
                     </span>
                     <span className="text-xs text-muted-foreground">
@@ -2977,9 +2977,9 @@ const SubmitReviewDropdown = memo(function SubmitReviewDropdown() {
             className={cn(
               "flex items-center gap-1.5 px-2 py-1 text-xs font-medium rounded-md transition-colors disabled:opacity-50",
               reviewType === "APPROVE" &&
-                "bg-green-600 text-white hover:bg-green-700",
+                "bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/30",
               reviewType === "REQUEST_CHANGES" &&
-                "bg-orange-600 text-white hover:bg-orange-700",
+                "bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 border border-amber-500/30",
               reviewType === "COMMENT" &&
                 "bg-primary text-primary-foreground hover:bg-primary/90"
             )}

src/browser/contexts/pr-review.tsx

@@ -2840,6 +2840,9 @@ export function useReviewActions() {
       store.setComments(newComments as ReviewComment[]);
 
       store.clearReviewState();
+
+      // Navigate to overview page after successful review submission
+      store.selectOverview();
     } finally {
       store.setSubmittingReview(false);
     }

src/browser/index.css

@@ -409,7 +409,7 @@
   font-size: 0.85em;
   padding: 0.2em 0.4em;
   margin: 0;
-  background-color: oklch(0.25 0 0);
+  background-color: oklch(0.22 0.01 260 / 80%);
   border-radius: 4px;
 }
 
@@ -420,19 +420,21 @@
   overflow: auto;
   font-size: 0.85em;
   line-height: 1.45;
-  background-color: oklch(0.16 0 0);
+  background-color: oklch(0.18 0.01 260 / 60%);
   border-radius: 6px;
-  border: 1px solid var(--border);
+  border: 1px solid oklch(1 0 0 / 8%);
 }
 
-.markdown-body pre code {
+.markdown-body pre code,
+.markdown-body pre code[class*="language-"],
+.markdown-body pre code.hljs {
   display: block;
   padding: 0;
   margin: 0;
   overflow: visible;
   line-height: inherit;
   word-wrap: normal;
-  background-color: transparent;
+  background: transparent !important;
   border: 0;
   font-size: 100%;
 }