Refine PR review UX and surface agent findings

- Add PR review commands to the command palette
- Tighten file comment validation and line entry UX
- Show agent review and rule violation banners with inline findings

Author: BunsDev

apps/web/src/components/CommandPalette.tsx

@@ -1,5 +1,5 @@
 import { ThreadId } from "@okcode/contracts";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { useNavigate, useParams, useRouterState } from "@tanstack/react-router";
 import { useCallback, useMemo, useRef, useState } from "react";
 import {
   ArrowLeftIcon,
@@ -22,6 +22,9 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { useStore } from "~/store";
 import { useCommandPaletteStore } from "~/commandPaletteStore";
+import { usePrReviewCommands } from "~/components/pr-review/usePrReviewCommands";
+import { usePrReviewStore } from "~/prReviewStore";
+import { ensureNativeApi } from "~/nativeApi";
 import { useHandleNewThread } from "~/hooks/useHandleNewThread";
 import { useCurrentWorktreeCleanupCandidates } from "~/hooks/useCurrentWorktreeCleanupCandidates";
 import { useTheme } from "~/hooks/useTheme";
@@ -147,6 +150,25 @@ function CommandsView() {
   const mruThreadIds = useCommandPaletteStore((s) => s.mruThreadIds);
   const openWorktreeCleanupDialog = useWorktreeCleanupStore((s) => s.openDialog);
   const { hasCandidates: hasWorktreeCleanupCandidates } = useCurrentWorktreeCleanupCandidates();
+
+  // PR Review commands integration
+  const currentPath = useRouterState({ select: (s) => s.location.pathname });
+  const isPrReviewRoute = currentPath.includes("/pr-review");
+  const prReviewDashboard = usePrReviewStore((s) => s.selectedPrNumber);
+  const prReviewCommands = usePrReviewCommands({
+    enabled: isPrReviewRoute,
+    onStartAgentReview: () => {
+      closePalette();
+      const store = usePrReviewStore.getState();
+      // Trigger is handled by the caller
+      document.dispatchEvent(new CustomEvent("command-palette:start-agent-review"));
+    },
+    onOpenOnGitHub: () => {
+      closePalette();
+      document.dispatchEvent(new CustomEvent("command-palette:open-on-github"));
+    },
+  });
+
   const routeThreadId = useParams({
     strict: false,
     select: (params) => (params.threadId ? ThreadId.makeUnsafe(params.threadId) : null),
@@ -371,6 +393,11 @@ function CommandsView() {
       },
     });
 
+    // ── PR Review (conditionally visible) ──
+    for (const prCmd of prReviewCommands) {
+      cmds.push(prCmd);
+    }
+
     return cmds.filter((cmd) => !cmd.hidden);
   }, [
     projects,
@@ -389,6 +416,7 @@ function CommandsView() {
     pushMruThread,
     openWorktreeCleanupDialog,
     hasWorktreeCleanupCandidates,
+    prReviewCommands,
   ]);
 
   // Filter commands by query

apps/web/src/components/pr-review/PrFileCommentComposer.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
 import { MessageSquareIcon } from "lucide-react";
 import { useLocalStorage } from "~/hooks/useLocalStorage";
 import { Button } from "~/components/ui/button";
-import { Input } from "~/components/ui/input";
 import { Spinner } from "~/components/ui/spinner";
 import { PrMentionComposer } from "./PrMentionComposer";
 import { TEXT_DRAFT_SCHEMA } from "./pr-review-utils";
@@ -32,22 +31,25 @@ export function PrFileCommentComposer({
     setLine(String(defaultLine));
   }, [defaultLine]);
 
+  const parsedLine = Number.parseInt(line, 10);
+  const isValidLine = Number.isFinite(parsedLine) && parsedLine >= 1;
+
   return (
     <div className="space-y-3 rounded-2xl border border-border/70 bg-background/90 p-3">
       <div className="flex items-center gap-3">
-        <label className="flex items-center gap-2 text-xs font-medium text-muted-foreground">
-          Line
-          <Input
-            className="h-8 w-24"
+        <span className="text-xs text-muted-foreground">
+          Comment on line{" "}
+          <input
+            className="inline-flex h-6 w-14 rounded border border-border/70 bg-muted/30 px-1.5 text-center text-xs font-medium text-foreground tabular-nums focus:border-primary/50 focus:outline-none focus:ring-1 focus:ring-ring/24"
             disabled={disabled || isSubmitting}
             inputMode="numeric"
             min={1}
             type="number"
             value={line}
             onChange={(event) => setLine(event.target.value)}
-          />
-        </label>
-        <span className="text-xs text-muted-foreground">Creates a review thread on {path}</span>
+          />{" "}
+          of <span className="font-medium text-foreground">{path}</span>
+        </span>
       </div>
       <PrMentionComposer
         cwd={cwd}
@@ -59,12 +61,11 @@ export function PrFileCommentComposer({
       />
       <div className="flex items-center justify-end gap-2">
         <Button
-          disabled={disabled || isSubmitting || body.trim().length === 0}
+          disabled={disabled || isSubmitting || body.trim().length === 0 || !isValidLine}
           onClick={() => {
-            const nextLine = Number.parseInt(line, 10);
-            if (!Number.isFinite(nextLine) || nextLine < 1) return;
+            if (!isValidLine) return;
             setIsSubmitting(true);
-            void onSubmit({ body: body.trim(), line: nextLine }).then(
+            void onSubmit({ body: body.trim(), line: parsedLine }).then(
               () => {
                 setBody("");
                 setIsSubmitting(false);

apps/web/src/components/pr-review/PrReviewShell.tsx

@@ -6,7 +6,6 @@ import { PanelRightIcon } from "lucide-react";
 import { useAppSettings } from "~/appSettings";
 import { useMediaQuery } from "~/hooks/useMediaQuery";
 import { invalidatePrReviewQueries } from "~/lib/prReviewReactQuery";
-import { cn } from "~/lib/utils";
 import { ensureNativeApi } from "~/nativeApi";
 import { joinPath } from "~/components/review/reviewUtils";
 import { Button } from "~/components/ui/button";
@@ -394,7 +393,6 @@ export function PrReviewShell({
         requestChangesVariant={resolveRequestChangesButtonVariant(
           settings.prReviewRequestChangesTone,
         )}
-        reviewComposerRef={reviewComposerRef}
       />
 
       {/* Inspector sheet (mobile/tablet) */}

apps/web/src/components/pr-review/PrWorkspace.tsx

@@ -1,5 +1,5 @@
 import { FileDiff, Virtualizer } from "@pierre/diffs/react";
-import type { NativeApi, PrReviewThread } from "@okcode/contracts";
+import type { NativeApi, PrAgentReviewResult, PrReviewThread } from "@okcode/contracts";
 import { useMemo } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Schema } from "effect";
@@ -23,6 +23,8 @@ import { useFileViewNavigation } from "~/hooks/useFileViewNavigation";
 import { joinPath } from "~/components/review/reviewUtils";
 import { projectPathExistsQueryOptions } from "~/lib/projectReactQuery";
 import type { Project } from "~/types";
+import { PrAgentReviewBanner } from "./PrAgentReviewBanner";
+import { PrRuleViolationBanner } from "./PrRuleViolationBanner";
 import { PrFileCommentComposer } from "./PrFileCommentComposer";
 import { PrFileTabStrip } from "./PrFileTabStrip";
 import {
@@ -43,24 +45,34 @@ export function PrWorkspace({
   project,
   patch,
   dashboard,
+  agentResult,
+  onStartAgentReview,
+  isStartingAgentReview,
   selectedFilePath,
   selectedThreadId,
   reviewedFiles,
+  approvalBlockers,
   onSelectFilePath,
   onSelectThreadId,
   onCreateThread,
   onToggleFileReviewed,
+  onOpenConflictDrawer,
 }: {
   project: Project;
   patch: string | null;
   dashboard: Awaited<ReturnType<NativeApi["prReview"]["getDashboard"]>> | null | undefined;
+  agentResult: PrAgentReviewResult | null | undefined;
+  onStartAgentReview: () => void;
+  isStartingAgentReview: boolean;
   selectedFilePath: string | null;
   selectedThreadId: string | null;
   reviewedFiles: readonly string[];
+  approvalBlockers: string[];
   onSelectFilePath: (path: string) => void;
   onSelectThreadId: (threadId: string | null) => void;
   onCreateThread: (input: { path: string; line: number; body: string }) => Promise<void>;
   onToggleFileReviewed: (path: string) => void;
+  onOpenConflictDrawer: () => void;
 }) {
   const { resolvedTheme } = useTheme();
   const openFileInCodeViewer = useFileViewNavigation();
@@ -91,6 +103,17 @@ export function PrWorkspace({
     }, {});
   }, [dashboard]);
 
+  // Agent findings grouped by file path
+  const agentFindingsByPath = useMemo<Record<string, typeof agentResult extends { findings: infer F } ? F : never>>(() => {
+    if (!agentResult?.findings) return {};
+    return agentResult.findings.reduce<Record<string, typeof agentResult.findings>>((acc, finding) => {
+      if (!finding.path) return acc;
+      if (!acc[finding.path]) acc[finding.path] = [];
+      acc[finding.path]!.push(finding);
+      return acc;
+    }, {});
+  }, [agentResult?.findings]);
+
   const patchFiles = useMemo(
     () => (renderablePatch?.kind === "files" ? renderablePatch.files : []),
     [renderablePatch],
@@ -184,6 +207,24 @@ export function PrWorkspace({
         </Button>
       </div>
 
+      {/* Agent review banner */}
+      <PrAgentReviewBanner
+        agentStatus={agentResult}
+        onStartReview={onStartAgentReview}
+        onSelectFile={onSelectFilePath}
+        onOpenFindings={() => {
+          // Handled by inspector tab switch via store
+        }}
+        isStarting={isStartingAgentReview}
+        fileCount={dashboard.files.length}
+      />
+
+      {/* Rule violation banner */}
+      <PrRuleViolationBanner
+        approvalBlockers={approvalBlockers}
+        onOpenConflictDrawer={onOpenConflictDrawer}
+      />
+
       {/* File tab strip */}
       {patchFiles.length > 0 ? (
         <PrFileTabStrip
@@ -220,6 +261,7 @@ export function PrWorkspace({
             const filePath = resolveFileDiffPath(fileDiff);
             const fileKey = `${buildFileDiffRenderKey(fileDiff)}:${resolvedTheme}`;
             const fileThreads = threadsByPath[filePath] ?? [];
+            const fileFindings = agentFindingsByPath[filePath] ?? [];
             const isSelected = selectedFilePath === filePath;
             const isReviewed = reviewedFilesSet.has(filePath);
             const firstCommentLine = fileThreads[0]?.line ?? 1;
@@ -271,6 +313,13 @@ export function PrWorkspace({
                         +{fileThreads.length - 2} more
                       </span>
                     ) : null}
+                    {/* Agent findings indicator for this file */}
+                    {fileFindings.length > 0 ? (
+                      <span className="inline-flex items-center gap-1 rounded-full border border-indigo-500/20 bg-indigo-500/8 px-2.5 py-0.5 text-[11px] font-medium text-indigo-400">
+                        <SparklesIconInline />
+                        {fileFindings.length} finding{fileFindings.length === 1 ? "" : "s"}
+                      </span>
+                    ) : null}
                     <button
                       className={cn(
                         "inline-flex items-center gap-1 rounded-full border px-2.5 py-0.5 text-[11px] font-medium transition-colors",
@@ -303,6 +352,53 @@ export function PrWorkspace({
                     </Button>
                   </div>
                 </div>
+
+                {/* Inline agent findings for this file */}
+                {fileFindings.length > 0 ? (
+                  <div className="border-b border-indigo-500/15 bg-indigo-500/5 px-4 py-2 space-y-1.5">
+                    {fileFindings.map((finding) => (
+                      <div
+                        className="flex items-start gap-2 text-xs"
+                        key={finding.id}
+                      >
+                        <span
+                          className={cn(
+                            "mt-0.5 shrink-0 size-3.5 rounded-full flex items-center justify-center text-[8px] font-bold",
+                            finding.severity === "critical"
+                              ? "bg-rose-500/20 text-rose-400"
+                              : finding.severity === "warning"
+                                ? "bg-amber-500/20 text-amber-400"
+                                : "bg-sky-500/20 text-sky-400",
+                          )}
+                        >
+                          {finding.severity === "critical" ? "!" : finding.severity === "warning" ? "!" : "i"}
+                        </span>
+                        <div className="min-w-0 flex-1">
+                          <span className="font-medium text-foreground">{finding.title}</span>
+                          {finding.line ? (
+                            <span className="ml-1.5 text-muted-foreground">L{finding.line}</span>
+                          ) : null}
+                        </div>
+                        <button
+                          className="shrink-0 text-[11px] text-indigo-400 hover:text-indigo-300"
+                          onClick={() => {
+                            if (finding.path && finding.line) {
+                              void onCreateThread({
+                                path: finding.path,
+                                line: finding.line,
+                                body: `**AI Finding (${finding.severity}):** ${finding.title}\n\n${finding.detail}`,
+                              });
+                            }
+                          }}
+                          type="button"
+                        >
+                          Create thread
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                ) : null}
+
                 <div className="p-3">
                   <FileDiff
                     fileDiff={fileDiff}
@@ -385,3 +481,24 @@ function PrDiffFileHeaderBadge({ cwd, path }: { cwd: string; path: string }) {
   }
   return <MissingOnDiskBadge path={absolutePath} compact />;
 }
+
+/** Tiny inline sparkles icon to avoid importing full lucide for a single use */
+function SparklesIconInline() {
+  return (
+    <svg
+      className="size-3"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z" />
+      <path d="M20 3v4" />
+      <path d="M22 5h-4" />
+      <path d="M4 17v2" />
+      <path d="M5 18H3" />
+    </svg>
+  );
+}