`.
+
+Starts open by default (`useState(true)`).
+
+### Milestone 4: Comments section
+
+**File: `hooks/useReviewTab/components/CommentsSection/CommentsSection.tsx`**
+
+The most complex section. Shows active and resolved comments with actions. Props:
+
+ interface CommentsSectionProps {
+ comments: PullRequestComment[];
+ isLoading: boolean;
+ workspaceId: string;
+ onCommentsChange: () => void;
+ }
+
+Internal state:
+
+- `commentsOpen: boolean` (default true) — controls the active comments collapsible.
+- `resolvedOpen: boolean` (default false) — controls the resolved comments collapsible.
+- `copiedActionKey: string | null` — tracks which comment was just copied (for showing the check icon briefly).
+- `resolvingThreadIds: Set` — tracks which threads have an in-flight resolve mutation.
+- `isResolvingAll: boolean` — tracks the batch resolve-all operation.
+
+Data flow:
+
+1. Split comments into `active` and `resolved` using `splitPullRequestComments`.
+2. Get the clipboard hook via `useCopyToClipboard`.
+3. Set up the resolve mutation via `electronTrpc.workspaces.resolveReviewThread.useMutation()`.
+
+Actions:
+
+- **Copy single comment**: Calls `copyToClipboard(buildCommentClipboardText(comment))` and sets `copiedActionKey`.
+- **Copy all comments**: Calls `copyToClipboard(buildAllCommentsClipboardText(activeComments))`.
+- **Resolve/unresolve thread**: Calls the resolve mutation with `{ workspaceId, threadId, resolve: !comment.isResolved }`. On success, calls `onCommentsChange()` to refetch.
+- **Mark all done**: Iterates unique resolvable thread IDs, calls the resolve mutation for each via `Promise.allSettled`, then calls `onCommentsChange()`.
+
+Each comment row renders: avatar (using `Avatar` from `@superset/ui/avatar`), author login, kind badge ("Review" or "Comment" via `getCommentKindText`), age (via `formatShortAge`), and a one-line body preview (via `getCommentPreviewText`). On hover, action buttons appear: resolve/unresolve, copy, and open-on-GitHub link.
+
+The resolved comments section appears below the active section only when `resolvedComments.length > 0`, collapsed by default.
+
+### Milestone 5: Wire into WorkspaceSidebar
+
+**Edit: `components/WorkspaceSidebar/WorkspaceSidebar.tsx`**
+
+1. Add import: `import { useReviewTab } from "./hooks/useReviewTab";`
+2. Call the hook: `const reviewTab = useReviewTab({ workspaceId });`
+3. Replace the `checksTab` useMemo block entirely.
+4. Change the tabs array: `const tabs = [filesTab, changesTab, reviewTab];`
+5. Remove the `checksTab` variable and its import (it's inline, so just delete lines 89-100).
+
+### Milestone 6: Validation and cleanup
+
+Run these commands from the repo root and verify:
+
+ bun run typecheck
+ # Expected: No errors
+
+ bun run lint:fix
+ # Expected: No unfixable lint errors
+
+ bun dev
+ # Expected: Desktop app opens. Create or open a v2 workspace that has
+ # a GitHub repo with a pull request. Click the "Review" tab in the
+ # right sidebar. Verify:
+ # - PR title, state icon, and link to GitHub are shown
+ # - Review decision badge (approved/changes requested/pending) appears
+ # - Requested reviewers are listed
+ # - CI checks section is collapsible, shows pass/fail/pending icons
+ # - Comments section shows active comments with avatars and previews
+ # - Hovering a comment reveals copy/resolve/link action buttons
+ # - Clicking resolve marks the thread as done (spinner, then updates)
+ # - "Mark all done" resolves all active threads
+ # - "Copy all" copies all comments to clipboard
+ # - Resolved comments appear in a separate collapsed section
+ # - If no PR exists, the tab shows the placeholder message
+ # - The tab badge shows the count of unresolved comments
+
+Also verify the existing v1 ChangesView ReviewPanel still works (it imports from its own utils.ts and should be unaffected).
+
+
+## Concrete Steps
+
+All paths are relative to the repository root.
+
+### Step 1: Create the useReviewTab hook
+
+Create the file `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/useReviewTab.tsx` with the hook implementation described in Milestone 1. The hook uses `electronTrpc` for data fetching and returns a `SidebarTabDefinition`.
+
+Create the barrel `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/index.ts` exporting `useReviewTab`.
+
+### Step 2: Create ReviewTabContent
+
+Create `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/ReviewTabContent.tsx` and its `index.ts`.
+
+### Step 3: Create PRHeader
+
+Create `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/PRHeader.tsx` and its `index.ts`. Import `PRIcon` from `renderer/screens/main/components/PRIcon` and `reviewDecisionConfig` from the v1 ReviewPanel utils.
+
+### Step 4: Create ChecksSection
+
+Create `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/ChecksSection.tsx` and its `index.ts`. Import `checkIconConfig`, `checkSummaryIconConfig`, `resolveCheckDestinationUrl` from the v1 ReviewPanel utils.
+
+### Step 5: Create CommentsSection
+
+Create `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/CommentsSection.tsx` and its `index.ts`. Import comment utilities from the v1 ReviewPanel utils and `useCopyToClipboard` from `renderer/hooks/useCopyToClipboard`.
+
+### Step 6: Wire into WorkspaceSidebar
+
+Edit `apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/WorkspaceSidebar.tsx`:
+
+- Import `useReviewTab`.
+- Call `useReviewTab({ workspaceId })`.
+- Replace `checksTab` with the result.
+- Update the `tabs` array.
+
+### Step 7: Validate
+
+ cd /Users/avipeltz/.superset/worktrees/superset/review-v2-screen
+ bun run typecheck
+ bun run lint:fix
+ bun dev
+
+
+## Validation and Acceptance
+
+After implementation, run:
+
+ bun run typecheck
+ # Expected: 0 errors
+
+ bun run lint:fix
+ # Expected: Clean or only pre-existing warnings
+
+ bun dev
+ # Open the desktop app. Navigate to a v2 workspace with a GitHub PR.
+
+Manual verification checklist:
+
+1. The sidebar shows three tabs: "All files", "Changes", "Review".
+2. The "Review" tab badge shows the count of unresolved comments (or no badge if zero).
+3. Clicking "Review" when no PR exists shows: "Open a pull request to view review status, checks, and comments."
+4. With a PR, the header shows: PR icon (colored by state), PR title (clickable to GitHub), review decision badge, requested reviewers.
+5. The Checks section is collapsible, defaults to open, shows each check with status icon and name. Clicking a check with a URL opens it in the browser.
+6. The Comments section shows active comments with: avatar, author, kind badge, age, one-line preview. Hover reveals action buttons.
+7. Clicking the resolve button on a comment shows a spinner and then the comment moves to the "Resolved" section.
+8. "Mark all done" resolves all threads with a loading state.
+9. "Copy all" copies all active comments to clipboard.
+10. The "Resolved" section appears collapsed when resolved comments exist. Expanding it shows the resolved comments.
+
+
+## Idempotence and Recovery
+
+All steps create new files or make additive edits to one existing file (`WorkspaceSidebar.tsx`). Running the steps multiple times is safe — creating a file that already exists will overwrite it with the same content. The edit to `WorkspaceSidebar.tsx` replaces the checksTab stub, which is idempotent (replacing the same lines again produces the same result).
+
+If something goes wrong mid-implementation, `git checkout -- apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/\$workspaceId/components/WorkspaceSidebar/` will revert all changes. The new `hooks/useReviewTab/` directory can be deleted to start fresh.
+
+
+## Interfaces and Dependencies
+
+### Imports from v1 code (already exist, no changes needed)
+
+- `electronTrpc` from `renderer/lib/electron-trpc` — React Query tRPC client for Electron IPC.
+- `getGitHubStatusQueryPolicy`, `getGitHubPRCommentsQueryPolicy` from `renderer/lib/githubQueryPolicy` — refetch policy helpers.
+- `reviewDecisionConfig`, `checkIconConfig`, `checkSummaryIconConfig`, `formatShortAge`, `getCommentPreviewText`, `getCommentAvatarFallback`, `buildCommentClipboardText`, `buildAllCommentsClipboardText`, `splitPullRequestComments`, `countOpenPullRequestComments`, `getCommentCopyActionKey`, `resolveCheckDestinationUrl`, `getCommentKindText` from `renderer/screens/main/components/WorkspaceView/RightSidebar/ChangesView/components/ReviewPanel/utils`.
+- `PRIcon` from `renderer/screens/main/components/PRIcon`.
+- `useCopyToClipboard` from `renderer/hooks/useCopyToClipboard`.
+
+### Imports from shared packages (already exist)
+
+- `GitHubStatus`, `PullRequestComment` from `@superset/local-db`.
+- `Avatar`, `AvatarFallback`, `AvatarImage` from `@superset/ui/avatar`.
+- `Collapsible`, `CollapsibleContent`, `CollapsibleTrigger` from `@superset/ui/collapsible`.
+- `Skeleton` from `@superset/ui/skeleton`.
+- `cn` from `@superset/ui/utils`.
+
+### Key function signatures
+
+ // The hook
+ function useReviewTab({ workspaceId }: { workspaceId: string }): SidebarTabDefinition
+
+ // Sub-components
+ function ReviewTabContent(props: {
+ pr: GitHubStatus["pr"] | null;
+ comments: PullRequestComment[];
+ isLoading: boolean;
+ isCommentsLoading: boolean;
+ workspaceId: string;
+ onRefresh: () => void;
+ }): ReactNode
+
+ function PRHeader(props: {
+ pr: NonNullable;
+ }): ReactNode
+
+ function ChecksSection(props: {
+ checks: NonNullable["checks"];
+ checksStatus: NonNullable["checksStatus"];
+ prUrl: string;
+ }): ReactNode
+
+ function CommentsSection(props: {
+ comments: PullRequestComment[];
+ isLoading: boolean;
+ workspaceId: string;
+ onCommentsChange: () => void;
+ }): ReactNode
+
+
+## Artifacts and Notes
+
+### V1 ReviewPanel data flow (for reference)
+
+In v1, `ChangesView.tsx` (the parent) fetches all data and passes it as props to `ReviewPanel`:
+
+ const { data: githubStatus } = electronTrpc.workspaces.getGitHubStatus.useQuery(
+ { workspaceId },
+ githubStatusQueryPolicy,
+ );
+ const activePullRequest = githubStatus?.pr ?? null;
+
+ const { data: githubComments = [] } = electronTrpc.workspaces.getGitHubPRComments.useQuery(
+ { workspaceId, prNumber: activePullRequest?.number, repoUrl: githubStatus?.repoUrl, ... },
+ githubPRCommentsQueryPolicy,
+ );
+
+
+
+
+
+ {relevantChecks.length === 0 ? (
+
+
+ );
+}
+
+function resolveCheckUrl(
+ check: NormalizedCheck,
+ prUrl: string,
+): string | undefined {
+ if (check.url) return check.url;
+ const name = check.name.trim().toLowerCase();
+ if (name.includes("coderabbit") || name.includes("code rabbit")) return prUrl;
+ return undefined;
+}
+
+function CheckRow({ check, prUrl }: { check: NormalizedCheck; prUrl: string }) {
+ const { icon: CheckIcon, className } = checkIconConfig[check.status];
+ const checkUrl = resolveCheckUrl(check, prUrl);
+
+ const inner = (
+ (null);
+ const copiedResetRef = useRef | null>(null);
+ const isMountedRef = useRef(true);
+
+ const copyToClipboard = useCallback(
+ (text: string) => electronTrpcClient.external.copyText.mutate(text),
+ [],
+ );
+
+ useEffect(() => {
+ return () => {
+ isMountedRef.current = false;
+ if (copiedResetRef.current) clearTimeout(copiedResetRef.current);
+ };
+ }, []);
+
+ const activeComments = useMemo(
+ () => comments.filter((c) => !c.isResolved),
+ [comments],
+ );
+ const resolvedComments = useMemo(
+ () => comments.filter((c) => c.isResolved),
+ [comments],
+ );
+
+ const markCopied = useCallback((key: string) => {
+ if (!isMountedRef.current) return;
+ if (copiedResetRef.current) clearTimeout(copiedResetRef.current);
+ setCopiedActionKey(key);
+ copiedResetRef.current = setTimeout(() => {
+ if (!isMountedRef.current) return;
+ setCopiedActionKey(null);
+ copiedResetRef.current = null;
+ }, 1500);
+ }, []);
+
+ const handleCopySingle = useCallback(
+ (comment: NormalizedComment) => {
+ void copyToClipboard(comment.body.trim() || "No comment body")
+ .then(() => {
+ markCopied(`comment:${comment.id}`);
+ })
+ .catch((err) => {
+ console.warn("Failed to copy comment", err);
+ });
+ },
+ [copyToClipboard, markCopied],
+ );
+
+ const handleCopyAll = useCallback(() => {
+ const text = activeComments
+ .map((c) => {
+ const location = c.path
+ ? c.line
+ ? `${c.path}:${c.line}`
+ : c.path
+ : c.kind === "conversation"
+ ? "Conversation"
+ : null;
+ const meta = [
+ c.authorLogin,
+ c.kind === "review" ? "Review" : "Comment",
+ location,
+ ]
+ .filter(Boolean)
+ .join(" \u2022 ");
+ return [meta, c.body.trim() || "No comment body"]
+ .filter(Boolean)
+ .join("\n");
+ })
+ .join("\n\n---\n\n");
+ void copyToClipboard(text)
+ .then(() => {
+ markCopied("comments:all");
+ })
+ .catch((err) => {
+ console.warn("Failed to copy comments", err);
+ });
+ }, [copyToClipboard, activeComments, markCopied]);
+
+ const commentsCountLabel = isLoading ? "..." : comments.length;
+ const copyAllLabel =
+ copiedActionKey === "comments:all" ? "Copied" : "Copy all";
+
+ return (
+ <>
+
+
+ {isLoading ? (
+
+
+
+ {resolvedComments.length > 0 && (
+
+
+
+
+ {resolvedComments.map((comment) => (
+
+
+ )}
+
+ );
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatShortAge(isoDate?: string): string | null {
+ if (!isoDate) return null;
+ const ms = Date.now() - new Date(isoDate).getTime();
+ if (Number.isNaN(ms) || ms < 0) return null;
+ const seconds = Math.round(ms / 1000);
+ if (seconds < 60) return `${Math.max(1, seconds)}s`;
+ const minutes = Math.round(seconds / 60);
+ if (minutes < 60) return `${minutes}m`;
+ const hours = Math.round(minutes / 60);
+ if (hours < 24) return `${hours}h`;
+ return `${Math.round(hours / 24)}d`;
+}
+
+function getPreviewText(body: string): string {
+ return (
+ body
+ .replace(//g, "\n")
+ .split(/\r?\n/)
+ .map((line) => line.trim())
+ .find(Boolean)
+ ?.replace(/^[-*+>]\s*/, "")
+ ?.replace(/\s+/g, " ") ?? "No preview available"
+ );
+}
+
+// ---------------------------------------------------------------------------
+// CommentRow
+// ---------------------------------------------------------------------------
+
+interface CommentRowProps {
+ comment: NormalizedComment;
+ copiedActionKey: string | null;
+ onCopy: (comment: NormalizedComment) => void;
+ onOpen?: (comment: CommentPaneData) => void;
+}
+
+function CommentRow({
+ comment,
+ copiedActionKey,
+ onCopy,
+ onOpen,
+}: CommentRowProps) {
+ const age = formatShortAge(comment.createdAt);
+ const isCopied = copiedActionKey === `comment:${comment.id}`;
+
+ const handleClick = () => {
+ onOpen?.({
+ commentId: comment.id,
+ authorLogin: comment.authorLogin,
+ avatarUrl: comment.avatarUrl,
+ body: comment.body,
+ url: comment.url,
+ path: comment.path,
+ line: comment.line,
+ });
+ };
+
+ const content = (
+ <>
+
+ {comment.avatarUrl ? (
+
+ {comment.authorLogin.slice(0, 2).toUpperCase()}
+
+
+ ;
+type V2PullRequest = NonNullable;
+type V2CheckRun = V2PullRequest["checks"][number];
+type V2ThreadsData = RouterOutputs["git"]["getPullRequestThreads"];
+
+interface UseReviewTabParams {
+ workspaceId: string;
+ onOpenComment?: (comment: CommentPaneData) => void;
+}
+
+export function useReviewTab({
+ workspaceId,
+ onOpenComment,
+}: UseReviewTabParams): SidebarTabDefinition {
+ const prQuery = workspaceTrpc.git.getPullRequest.useQuery(
+ { workspaceId },
+ {
+ enabled: !!workspaceId,
+ refetchInterval: 10_000,
+ refetchOnWindowFocus: true,
+ staleTime: 10_000,
+ },
+ );
+
+ const hasPR = prQuery.isSuccess && prQuery.data != null;
+ const threadsQuery = workspaceTrpc.git.getPullRequestThreads.useQuery(
+ { workspaceId },
+ {
+ enabled: !!workspaceId && hasPR,
+ refetchInterval: 30_000,
+ refetchOnWindowFocus: true,
+ },
+ );
+
+ const pr = useMemo(() => {
+ const raw = prQuery.data;
+ if (!raw) return null;
+ return {
+ number: raw.number,
+ url: raw.url,
+ title: raw.title,
+ state: raw.isDraft ? "draft" : raw.state,
+ reviewDecision: normalizeReviewDecision(raw.reviewDecision),
+ checksStatus: computeChecksStatus(raw.checks),
+ checks: raw.checks.map((c) => ({
+ name: c.name,
+ // The DB stores the already-resolved effective status (success/failure/
+ // pending/skipped/cancelled) in the `status` field, even though the
+ // tRPC type calls it CheckStatusState. Fall back to coercing it.
+ status: coerceCheckStatus(c.status, c.conclusion),
+ url: c.detailsUrl ?? undefined,
+ durationText: computeDurationText(c.startedAt, c.completedAt),
+ })),
+ };
+ }, [prQuery.data]);
+
+ // FORK NOTE: gate comments on `pr` existence. React Query keeps the last
+ // successful threadsQuery.data in cache even after `getPullRequest`
+ // returns null (e.g. PR closed/unlinked), so without this guard the
+ // Review tab would keep showing stale comments and badge count after
+ // the PR disappears.
+ const comments = useMemo(() => {
+ if (!pr) return [];
+ const data = threadsQuery.data;
+ if (!data) return [];
+ return normalizeThreadsToComments(data);
+ }, [pr, threadsQuery.data]);
+
+ const openCommentCount = comments.filter((c) => !c.isResolved).length;
+
+ const content = (
+ ([
+ "success",
+ "failure",
+ "pending",
+ "skipped",
+ "cancelled",
+]);
+
+/**
+ * The DB stores the already-resolved effective status in `checksJson[].status`
+ * (e.g. "success", "failure"). But the tRPC router re-parses it into a
+ * CheckRun whose `status` field is typed as CheckStatusState ("completed" etc.)
+ * and whose `conclusion` is always null. So we first check whether the status
+ * value is already one of the effective statuses; if not, fall back to the
+ * status+conclusion logic for raw GitHub data.
+ */
+function coerceCheckStatus(
+ status: string,
+ conclusion: string | null,
+): EffectiveCheckStatus {
+ if (KNOWN_CHECK_STATUSES.has(status)) return status as EffectiveCheckStatus;
+ // Raw GitHub data path: status is "completed"/"in_progress"/etc.
+ if (status !== "completed") return "pending";
+ if (!conclusion) return "pending";
+ if (conclusion === "success" || conclusion === "neutral") return "success";
+ if (conclusion === "skipped") return "skipped";
+ if (conclusion === "cancelled") return "cancelled";
+ return "failure";
+}
+
+function computeChecksStatus(
+ checks: V2CheckRun[],
+): "success" | "failure" | "pending" | "none" {
+ let hasFailure = false;
+ let hasPending = false;
+ let relevantCount = 0;
+ for (const c of checks) {
+ const s = coerceCheckStatus(c.status, c.conclusion);
+ if (s === "skipped" || s === "cancelled") continue;
+ relevantCount++;
+ if (s === "failure") hasFailure = true;
+ else if (s === "pending") hasPending = true;
+ }
+ if (relevantCount === 0) return "none";
+ if (hasFailure) return "failure";
+ if (hasPending) return "pending";
+ return "success";
+}
+
+function computeDurationText(
+ startedAt: string | null,
+ completedAt: string | null,
+): string | undefined {
+ if (!startedAt || !completedAt) return undefined;
+ const ms = new Date(completedAt).getTime() - new Date(startedAt).getTime();
+ if (Number.isNaN(ms) || ms < 0) return undefined;
+ const seconds = Math.round(ms / 1000);
+ if (seconds < 60) return `${seconds}s`;
+ const minutes = Math.round(seconds / 60);
+ return `${minutes}m`;
+}
+
+function normalizeThreadsToComments(data: V2ThreadsData): NormalizedComment[] {
+ const comments: NormalizedComment[] = [];
+
+ // FORK NOTE: upstream #3463 only picked thread.comments[0] which dropped
+ // every reply in a review thread. v1 flattened all comments in a thread.
+ // Keep that behavior so the comment count badge and listing match the
+ // real PR state.
+ for (const thread of data.reviewThreads) {
+ for (const c of thread.comments) {
+ comments.push({
+ id: c.id,
+ authorLogin: c.author.login,
+ avatarUrl: c.author.avatarUrl || undefined,
+ body: c.body,
+ createdAt: c.createdAt,
+ url: undefined,
+ kind: "review",
+ path: thread.path || undefined,
+ line: thread.line ?? undefined,
+ isResolved: thread.isResolved,
+ threadId: thread.id,
+ });
+ }
+ }
+
+ for (const c of data.conversationComments) {
+ comments.push({
+ id: String(c.id),
+ authorLogin: c.user.login,
+ avatarUrl: c.user.avatarUrl || undefined,
+ body: c.body,
+ createdAt: c.createdAt,
+ url: c.htmlUrl || undefined,
+ kind: "conversation",
+ isResolved: false,
+ threadId: undefined,
+ });
+ }
+
+ comments.sort((a, b) => {
+ const ta = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+ const tb = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+ return ta - tb;
+ });
+
+ return comments;
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/CommentPane.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/CommentPane.tsx
new file mode 100644
index 00000000000..2ce60b51616
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/CommentPane.tsx
@@ -0,0 +1,317 @@
+import { mermaid } from "@streamdown/mermaid";
+import type { RendererContext } from "@superset/panes";
+import { Avatar, AvatarFallback, AvatarImage } from "@superset/ui/avatar";
+import {
+ type ReactNode,
+ useCallback,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+import { LuCheck, LuCopy } from "react-icons/lu";
+import ReactMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import {
+ oneDark,
+ oneLight,
+} from "react-syntax-highlighter/dist/esm/styles/prism";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import remarkGfm from "remark-gfm";
+import { SafeImage } from "renderer/components/MarkdownRenderer/components/SafeImage";
+import { electronTrpcClient } from "renderer/lib/trpc-client";
+import { useTheme } from "renderer/stores";
+import { Streamdown } from "streamdown";
+import type { CommentPaneData, PaneViewerData } from "../../../../types";
+import "./comment-pane.css";
+
+interface CommentPaneProps {
+ context: RendererContext;
+}
+
+export function CommentPane({ context }: CommentPaneProps) {
+ const data = context.pane.data as CommentPaneData;
+ const [copied, setCopied] = useState(false);
+ const copyTimerRef = useRef | null>(null);
+ const isMountedRef = useRef(true);
+
+ useEffect(() => {
+ return () => {
+ isMountedRef.current = false;
+ if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+ };
+ }, []);
+
+ const handleCopyAll = useCallback(() => {
+ void electronTrpcClient.external.copyText
+ .mutate(data.body)
+ .then(() => {
+ if (!isMountedRef.current) return;
+ if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
+ setCopied(true);
+ copyTimerRef.current = setTimeout(() => {
+ if (!isMountedRef.current) return;
+ setCopied(false);
+ copyTimerRef.current = null;
+ }, 1500);
+ })
+ .catch((err) => {
+ console.warn("Failed to copy comment text", err);
+ });
+ }, [data.body]);
+
+ return (
+
+ {`\`\`\`mermaid\n${codeString}\n\`\`\``}
+
+ );
+ }
+
+ if (!language) {
+ return (
+
+ }
+ language={language}
+ PreTag="div"
+ className="rounded-md text-sm"
+ >
+ {codeString}
+
+ );
+}
+
+// FORK NOTE: override and ![]()
so comment body markdown from GitHub
+// can't navigate the main window away or load arbitrary remote images.
+// Matches the shared MarkdownRenderer guards.
+function CommentLink({
+ href,
+ children,
+}: {
+ href?: string;
+ children?: ReactNode;
+}) {
+ const onClick = useCallback(
+ (event: React.MouseEvent) => {
+ event.preventDefault();
+ if (!href) return;
+ electronTrpcClient.external.openUrl.mutate(href).catch((err) => {
+ console.warn("Failed to open external URL", err);
+ });
+ },
+ [href],
+ );
+ return (
+
+ {children}
+
+ );
+}
+
+function CommentImage({
+ src,
+ alt,
+ className,
+}: {
+ src?: string;
+ alt?: string;
+ className?: string;
+}) {
+ return {children}
+ ),
+ a: CommentLink,
+ img: CommentImage,
+};
+
+function CopyableTable({ children }: { children?: ReactNode }) {
+ const tableRef = useRef(null);
+ const [copied, setCopied] = useState(false);
+ const timerRef = useRef | null>(null);
+ const isMountedRef = useRef(true);
+
+ useEffect(() => {
+ return () => {
+ isMountedRef.current = false;
+ if (timerRef.current) clearTimeout(timerRef.current);
+ };
+ }, []);
+
+ const handleCopy = useCallback(() => {
+ const el = tableRef.current;
+ if (!el) return;
+
+ const rows = el.querySelectorAll("tr");
+ const lines: string[] = [];
+ for (const row of rows) {
+ const cells = row.querySelectorAll("th, td");
+ const values: string[] = [];
+ for (const cell of cells) {
+ values.push((cell.textContent ?? "").trim());
+ }
+ lines.push(values.join("\t"));
+ }
+ const text = lines.join("\n");
+ void electronTrpcClient.external.copyText
+ .mutate(text)
+ .then(() => {
+ if (!isMountedRef.current) return;
+ if (timerRef.current) clearTimeout(timerRef.current);
+ setCopied(true);
+ timerRef.current = setTimeout(() => {
+ if (!isMountedRef.current) return;
+ setCopied(false);
+ timerRef.current = null;
+ }, 1500);
+ })
+ .catch((err) => {
+ console.warn("Failed to copy table text", err);
+ });
+ }, []);
+
+ return (
+ ) => {
+ const data = ctx.pane.data as CommentPaneData;
+ if (!data.avatarUrl) {
+ return 
+ );
+ },
+ getTitle: (pane) => {
+ const data = pane.data as CommentPaneData;
+ return data.authorLogin;
+ },
+ renderPane: (ctx: RendererContext) => (
+ ) => {
+ const data = ctx.pane.data as CommentPaneData;
+ if (!data.url) return null;
+ return (
+
+ ) => {
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/page.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/page.tsx
index 3a3acd2514f..a3fbe94da08 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/page.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/page.tsx
@@ -45,6 +45,7 @@ import { useWorkspaceHotkeys } from "./hooks/useWorkspaceHotkeys";
import type {
BrowserPaneData,
ChatPaneData,
+ CommentPaneData,
DiffPaneData,
FilePaneData,
PaneViewerData,
@@ -363,6 +364,36 @@ function WorkspaceContent({
});
}, [openFilePane, workspaceId]);
+ // FORK NOTE: upstream #3463 introduces openCommentPane for the new
+ // v2 Review tab. Keep it alongside fork's useCommandPalette-based
+ // quick open (fork uses a hook, upstream uses a simple boolean state).
+ const openCommentPane = useCallback(
+ (comment: CommentPaneData) => {
+ const state = store.getState();
+ for (const tab of state.tabs) {
+ for (const pane of Object.values(tab.panes)) {
+ if (pane.kind !== "comment") continue;
+ state.setPaneData({
+ paneId: pane.id,
+ data: comment as PaneViewerData,
+ });
+ state.setActiveTab(tab.id);
+ state.setActivePane({ tabId: tab.id, paneId: pane.id });
+ return;
+ }
+ }
+ state.addTab({
+ panes: [
+ {
+ kind: "comment",
+ data: comment as PaneViewerData,
+ },
+ ],
+ });
+ },
+ [store],
+ );
+
const commandPalette = useCommandPalette({
workspaceId,
navigate,
@@ -537,6 +568,7 @@ function WorkspaceContent({
workspaceName={workspaceName}
onSelectFile={openSidebarFilePane}
onSelectDiffFile={openDiffPane}
+ onOpenComment={openCommentPane}
onSearch={handleQuickOpen}
selectedFilePath={selectedFilePath}
/>
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts
index 61db8ea3edf..d16e1b4c5d3 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/types.ts
@@ -34,10 +34,21 @@ export interface DiffPaneData {
collapsedFiles: string[];
}
+export interface CommentPaneData {
+ commentId: string;
+ authorLogin: string;
+ avatarUrl?: string;
+ body: string;
+ url?: string;
+ path?: string;
+ line?: number;
+}
+
export type PaneViewerData =
| FilePaneData
| TerminalPaneData
| ChatPaneData
| BrowserPaneData
| DevtoolsPaneData
- | DiffPaneData;
+ | DiffPaneData
+ | CommentPaneData;
- Coming soon
-
- ),
- }),
- [],
- );
-
- const tabs = [filesTab, changesTab, checksTab];
+ const tabs = [filesTab, changesTab, reviewTab];
const activeTabDef = tabs.find((t) => t.id === activeTab);
return (
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/components/SidebarHeader/SidebarHeader.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/components/SidebarHeader/SidebarHeader.tsx
index 3b70448d54d..0ca94f1a1ac 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/components/SidebarHeader/SidebarHeader.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/components/SidebarHeader/SidebarHeader.tsx
@@ -30,7 +30,7 @@ export function SidebarHeader({
)}
>
{tab.label}
- {tab.badge != null && tab.badge > 0 && (
+ {tab.badge != null && (
{tab.badge}
)}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/ChecksSection.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/ChecksSection.tsx
new file mode 100644
index 00000000000..365a7c4721a
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/ChecksSection.tsx
@@ -0,0 +1,175 @@
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@superset/ui/collapsible";
+import { cn } from "@superset/ui/utils";
+import { useMemo, useState } from "react";
+import {
+ LuArrowUpRight,
+ LuCheck,
+ LuLoaderCircle,
+ LuMinus,
+ LuX,
+} from "react-icons/lu";
+import { VscChevronRight } from "react-icons/vsc";
+import type { NormalizedCheck, NormalizedPR } from "../../types";
+
+const checkIconConfig = {
+ success: {
+ icon: LuCheck,
+ className: "text-emerald-600 dark:text-emerald-400",
+ },
+ failure: { icon: LuX, className: "text-red-600 dark:text-red-400" },
+ pending: {
+ icon: LuLoaderCircle,
+ className: "text-amber-600 dark:text-amber-400",
+ },
+ skipped: { icon: LuMinus, className: "text-muted-foreground" },
+ cancelled: { icon: LuMinus, className: "text-muted-foreground" },
+} as const;
+
+const checkSummaryIconConfig = {
+ success: checkIconConfig.success,
+ failure: checkIconConfig.failure,
+ pending: checkIconConfig.pending,
+ none: { icon: LuMinus, className: "text-muted-foreground" },
+} as const;
+
+interface ChecksSectionProps {
+ checks: NormalizedCheck[];
+ checksStatus: NormalizedPR["checksStatus"];
+ prUrl: string;
+}
+
+export function ChecksSection({
+ checks,
+ checksStatus,
+ prUrl,
+}: ChecksSectionProps) {
+ const [open, setOpen] = useState(true);
+
+ const relevantChecks = useMemo(
+ () =>
+ checks.filter(
+ (check) => check.status !== "skipped" && check.status !== "cancelled",
+ ),
+ [checks],
+ );
+
+ const passingChecks = relevantChecks.filter(
+ (check) => check.status === "success",
+ ).length;
+ const checksSummary =
+ relevantChecks.length > 0
+ ? `${passingChecks}/${relevantChecks.length} checks passing`
+ : "No checks reported";
+ const checksStatusConfig = checkSummaryIconConfig[checksStatus];
+ const ChecksStatusIcon = checksStatusConfig.icon;
+
+ return (
+
+
+
+
+
+ No checks reported.
+
+ ) : (
+ relevantChecks.map((check, index) => (
+
+
+ );
+
+ return checkUrl ? (
+
+ {inner}
+
+ ) : (
+ inner
+ );
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/index.ts
new file mode 100644
index 00000000000..093db2ed3bf
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ChecksSection/index.ts
@@ -0,0 +1 @@
+export { ChecksSection } from "./ChecksSection";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/CommentsSection.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/CommentsSection.tsx
new file mode 100644
index 00000000000..e907c55ab39
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/CommentsSection.tsx
@@ -0,0 +1,354 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@superset/ui/avatar";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@superset/ui/collapsible";
+import { Skeleton } from "@superset/ui/skeleton";
+import { cn } from "@superset/ui/utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { LuArrowUpRight, LuCheck, LuCopy } from "react-icons/lu";
+import { VscChevronRight } from "react-icons/vsc";
+import { electronTrpcClient } from "renderer/lib/trpc-client";
+import type { CommentPaneData } from "../../../../../../types";
+import type { NormalizedComment } from "../../types";
+
+interface CommentsSectionProps {
+ comments: NormalizedComment[];
+ isLoading: boolean;
+ onOpenComment?: (comment: CommentPaneData) => void;
+}
+
+export function CommentsSection({
+ comments,
+ isLoading,
+ onOpenComment,
+}: CommentsSectionProps) {
+ const [commentsOpen, setCommentsOpen] = useState(true);
+ const [resolvedOpen, setResolvedOpen] = useState(false);
+ const [copiedActionKey, setCopiedActionKey] = useState
+ {check.name}
+ {checkUrl && (
+
+ {check.durationText && (
+
+ {check.durationText}
+
+ )}
+
+
+
+ {activeComments.length > 0 && (
+
+
+
+
+ )}
+
+
+ ) : comments.length === 0 ? (
+
+ No comments yet.
+
+ ) : (
+ activeComments.map((comment) => (
+
+
+
+ );
+
+ return (
+
+
+ {comment.authorLogin}
+
+
+ {comment.kind === "review" ? "Review" : "Comment"}
+
+
+ {age ? (
+
+ {age}
+
+ ) : null}
+
+ + {getPreviewText(comment.body)} +
+
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/index.ts
new file mode 100644
index 00000000000..2a154c68e68
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/CommentsSection/index.ts
@@ -0,0 +1 @@
+export { CommentsSection } from "./CommentsSection";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/PRHeader.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/PRHeader.tsx
new file mode 100644
index 00000000000..1a48e0f154c
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/PRHeader.tsx
@@ -0,0 +1,61 @@
+import { cn } from "@superset/ui/utils";
+import { LuArrowUpRight } from "react-icons/lu";
+import { PRIcon } from "renderer/screens/main/components/PRIcon";
+import type { NormalizedPR } from "../../types";
+
+const reviewDecisionConfig = {
+ approved: {
+ label: "Approved",
+ className:
+ "border border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+ },
+ changes_requested: {
+ label: "Changes requested",
+ className:
+ "border border-red-500/20 bg-red-500/10 text-red-700 dark:text-red-300",
+ },
+ pending: {
+ label: "Review pending",
+ className:
+ "border border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300",
+ },
+} as const;
+
+interface PRHeaderProps {
+ pr: NormalizedPR;
+}
+
+export function PRHeader({ pr }: PRHeaderProps) {
+ return (
+
+
+ {comment.url ? (
+
+
+
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/index.ts
new file mode 100644
index 00000000000..d374e0690ed
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/PRHeader/index.ts
@@ -0,0 +1 @@
+export { PRHeader } from "./PRHeader";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/ReviewTabContent.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/ReviewTabContent.tsx
new file mode 100644
index 00000000000..55aa0e989c8
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/ReviewTabContent.tsx
@@ -0,0 +1,70 @@
+import { memo } from "react";
+import type { CommentPaneData } from "../../../../../../types";
+import type { NormalizedComment, NormalizedPR } from "../../types";
+import { ChecksSection } from "../ChecksSection";
+import { CommentsSection } from "../CommentsSection";
+import { PRHeader } from "../PRHeader";
+
+interface ReviewTabContentProps {
+ pr: NormalizedPR | null;
+ comments: NormalizedComment[];
+ isLoading: boolean;
+ isError: boolean;
+ isCommentsLoading: boolean;
+ onOpenComment?: (comment: CommentPaneData) => void;
+}
+
+export const ReviewTabContent = memo(function ReviewTabContent({
+ pr,
+ comments,
+ isLoading,
+ isError,
+ isCommentsLoading,
+ onOpenComment,
+}: ReviewTabContentProps) {
+ if (isError) {
+ return (
+
+
+ {reviewDecisionConfig[pr.reviewDecision].label}
+
+
+
+ Unable to load review status
+
+ );
+ }
+
+ if (isLoading && !pr) {
+ return (
+
+ Loading review...
+
+ );
+ }
+
+ if (!pr) {
+ return (
+
+ Open a pull request to view review status, checks, and comments.
+
+ );
+ }
+
+ return (
+
+
+ );
+});
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/index.ts
new file mode 100644
index 00000000000..398e2cda815
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/components/ReviewTabContent/index.ts
@@ -0,0 +1 @@
+export { ReviewTabContent } from "./ReviewTabContent";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/index.ts
new file mode 100644
index 00000000000..019d568ed51
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/index.ts
@@ -0,0 +1 @@
+export { useReviewTab } from "./useReviewTab";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/types.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/types.ts
new file mode 100644
index 00000000000..890df920c3d
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/types.ts
@@ -0,0 +1,32 @@
+/** Normalized PR shape used by review tab UI components. */
+export interface NormalizedPR {
+ number: number;
+ url: string;
+ title: string;
+ state: "open" | "closed" | "merged" | "draft";
+ reviewDecision: "approved" | "changes_requested" | "pending";
+ checksStatus: "success" | "failure" | "pending" | "none";
+ checks: NormalizedCheck[];
+}
+
+export interface NormalizedCheck {
+ name: string;
+ status: "success" | "failure" | "pending" | "skipped" | "cancelled";
+ url?: string;
+ durationText?: string;
+}
+
+/** Normalized comment shape, flattened from review threads + conversation comments. */
+export interface NormalizedComment {
+ id: string;
+ authorLogin: string;
+ avatarUrl?: string;
+ body: string;
+ createdAt?: string;
+ url?: string;
+ kind: "review" | "conversation";
+ path?: string;
+ line?: number;
+ isResolved: boolean;
+ threadId?: string;
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/useReviewTab.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/useReviewTab.tsx
new file mode 100644
index 00000000000..1fe31030f21
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/components/WorkspaceSidebar/hooks/useReviewTab/useReviewTab.tsx
@@ -0,0 +1,228 @@
+import type { AppRouter } from "@superset/host-service";
+import { workspaceTrpc } from "@superset/workspace-client";
+import type { inferRouterOutputs } from "@trpc/server";
+import { useMemo } from "react";
+import type { CommentPaneData } from "../../../../types";
+import type { SidebarTabDefinition } from "../../types";
+import { ReviewTabContent } from "./components/ReviewTabContent";
+import type { NormalizedComment, NormalizedPR } from "./types";
+
+type RouterOutputs = inferRouterOutputs
+
+ );
+}
+
+const mermaidPlugins = { mermaid };
+
+const MERMAID_DARK_VARS = {
+ background: "#1e1e2e",
+ primaryColor: "#313244",
+ primaryTextColor: "#cdd6f4",
+ primaryBorderColor: "#45475a",
+ secondaryColor: "#313244",
+ secondaryTextColor: "#cdd6f4",
+ secondaryBorderColor: "#45475a",
+ tertiaryColor: "#313244",
+ tertiaryTextColor: "#cdd6f4",
+ tertiaryBorderColor: "#45475a",
+ nodeBorder: "#45475a",
+ nodeTextColor: "#cdd6f4",
+ mainBkg: "#313244",
+ clusterBkg: "#1e1e2e",
+ titleColor: "#cdd6f4",
+ edgeLabelBackground: "transparent",
+ lineColor: "#6c7086",
+ textColor: "#cdd6f4",
+};
+
+const MERMAID_LIGHT_VARS = {
+ background: "#ffffff",
+ primaryColor: "#f0f0f4",
+ primaryTextColor: "#1e1e2e",
+ primaryBorderColor: "#d0d0d8",
+ lineColor: "#888",
+ textColor: "#1e1e2e",
+};
+
+function CommentCodeBlock({
+ className,
+ children,
+}: {
+ className?: string;
+ children?: ReactNode;
+}) {
+ const theme = useTheme();
+ const isDark = theme?.type !== "light";
+
+ const match = /language-(\w+)/.exec(className || "");
+ const language = match ? match[1] : undefined;
+ const codeString = String(children).replace(/\n$/, "");
+
+ if (language === "mermaid") {
+ return (
+
+
+ {data.avatarUrl ? (
+
+ {data.authorLogin.slice(0, 2).toUpperCase()}
+
+
+
+ {data.authorLogin}
+
+ {data.path && (
+
+ {data.path}
+ {data.line != null ? `:${data.line}` : ""}
+
+ )}
+
+
+
+
+
+ {data.body}
+
+
+
+
+ {children}
+
+ );
+ }
+
+ return (
+
+
+
+ );
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/comment-pane.css b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/comment-pane.css
new file mode 100644
index 00000000000..c0333e827ce
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/comment-pane.css
@@ -0,0 +1,263 @@
+.comment-pane-markdown {
+ color: var(--foreground);
+ background: var(--background);
+ font-size: 0.875rem;
+ line-height: 1.625;
+ -webkit-font-smoothing: antialiased;
+}
+
+.comment-pane-markdown article {
+ width: 100%;
+}
+
+/* Headings */
+.comment-pane-markdown h1 {
+ font-size: 1.75rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ letter-spacing: -0.02em;
+}
+
+.comment-pane-markdown h2 {
+ font-size: 1.35rem;
+ font-weight: 600;
+ line-height: 1.3;
+ margin-top: 1.5rem;
+ margin-bottom: 0.625rem;
+}
+
+.comment-pane-markdown h3 {
+ font-size: 1.1rem;
+ font-weight: 600;
+ line-height: 1.4;
+ margin-top: 1.25rem;
+ margin-bottom: 0.5rem;
+}
+
+.comment-pane-markdown h4,
+.comment-pane-markdown h5,
+.comment-pane-markdown h6 {
+ font-size: 0.95rem;
+ font-weight: 600;
+ line-height: 1.5;
+ margin-top: 1rem;
+ margin-bottom: 0.375rem;
+}
+
+/* First child no top margin */
+.comment-pane-markdown article > *:first-child {
+ margin-top: 0;
+}
+
+/* Paragraphs */
+.comment-pane-markdown p {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+}
+
+/* Links */
+.comment-pane-markdown a {
+ color: var(--primary);
+ text-decoration: underline;
+ text-underline-offset: 2px;
+}
+
+.comment-pane-markdown a:hover {
+ opacity: 0.8;
+}
+
+/* Strong & emphasis */
+.comment-pane-markdown strong {
+ font-weight: 600;
+}
+
+.comment-pane-markdown em {
+ font-style: italic;
+}
+
+/* Lists */
+.comment-pane-markdown ul,
+.comment-pane-markdown ol {
+ margin-top: 0;
+ margin-bottom: 0.75rem;
+ padding-left: 1.5rem;
+}
+
+.comment-pane-markdown ul {
+ list-style-type: disc;
+}
+
+.comment-pane-markdown ol {
+ list-style-type: decimal;
+}
+
+.comment-pane-markdown li {
+ margin-bottom: 0.25rem;
+}
+
+.comment-pane-markdown li > ul,
+.comment-pane-markdown li > ol {
+ margin-top: 0.25rem;
+ margin-bottom: 0;
+}
+
+/* Tables — full width with borders */
+.comment-pane-markdown table {
+ width: 100%;
+ border-collapse: collapse;
+ margin: 0.75rem 0;
+ font-size: 0.8125rem;
+}
+
+.comment-pane-markdown th,
+.comment-pane-markdown td {
+ border: 1px solid var(--border);
+ padding: 0.5rem 0.75rem;
+ vertical-align: middle;
+}
+
+.comment-pane-markdown th {
+ font-weight: 500;
+ text-align: left;
+ background: color-mix(in srgb, var(--muted) 50%, transparent);
+}
+
+.comment-pane-markdown td img {
+ display: inline-block;
+ vertical-align: middle;
+}
+
+/* Blockquotes */
+.comment-pane-markdown blockquote {
+ border-left: 3px solid var(--border);
+ padding-left: 1rem;
+ margin: 0.75rem 0;
+ color: var(--muted-foreground);
+}
+
+.comment-pane-markdown blockquote p:last-child {
+ margin-bottom: 0;
+}
+
+/* Horizontal rules */
+.comment-pane-markdown hr {
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 1.5rem 0;
+}
+
+/* Code — inline */
+.comment-pane-markdown code {
+ font-family: var(--font-mono, ui-monospace, monospace);
+ font-size: 0.8125rem;
+ background: color-mix(in srgb, var(--muted) 60%, transparent);
+ padding: 0.125rem 0.375rem;
+ border-radius: 0.25rem;
+}
+
+/* Code — blocks */
+.comment-pane-markdown pre {
+ margin: 0.75rem 0;
+ padding: 0.75rem 1rem;
+ background: color-mix(in srgb, var(--muted) 40%, transparent);
+ border-radius: 0.375rem;
+ overflow-x: auto;
+}
+
+.comment-pane-markdown pre code {
+ background: none;
+ padding: 0;
+ border-radius: 0;
+ font-size: 0.8125rem;
+ line-height: 1.5;
+}
+
+/* Images */
+.comment-pane-markdown img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 0.375rem;
+}
+
+/* Details/summary (common in GitHub bot comments) */
+.comment-pane-markdown details {
+ margin: 0.75rem 0;
+ border: 1px solid var(--border);
+ border-radius: 0.375rem;
+ overflow: hidden;
+}
+
+.comment-pane-markdown details > summary {
+ cursor: pointer;
+ padding: 0.5rem 0.75rem;
+ font-weight: 500;
+ background: color-mix(in srgb, var(--muted) 30%, transparent);
+ user-select: none;
+}
+
+.comment-pane-markdown details > summary:hover {
+ background: color-mix(in srgb, var(--muted) 50%, transparent);
+}
+
+.comment-pane-markdown details[open] > summary {
+ border-bottom: 1px solid var(--border);
+}
+
+.comment-pane-markdown details > *:not(summary) {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+}
+
+.comment-pane-markdown details > p:first-of-type {
+ margin-top: 0.5rem;
+}
+
+/* Task lists (checkboxes) */
+.comment-pane-markdown .task-list-item {
+ list-style: none;
+ display: flex;
+ align-items: flex-start;
+ gap: 0.5rem;
+}
+
+.comment-pane-markdown .task-list-item input[type="checkbox"] {
+ margin-top: 0.25rem;
+}
+
+/* Sub text */
+.comment-pane-markdown sub {
+ font-size: 0.75rem;
+ color: var(--muted-foreground);
+}
+
+/* Strikethrough */
+.comment-pane-markdown del {
+ text-decoration: line-through;
+ opacity: 0.6;
+}
+
+/* Mermaid diagrams */
+.comment-pane-markdown [data-streamdown="mermaid-block"] {
+ margin: 0.75rem 0;
+ border-radius: 0.375rem;
+ background: transparent;
+ border: none;
+ padding: 0;
+}
+
+/* Hide "mermaid" label + action buttons */
+.comment-pane-markdown [data-streamdown="mermaid-block"] > .flex.h-8 {
+ display: none;
+}
+
+.comment-pane-markdown [data-streamdown="mermaid-block-actions"] {
+ display: none;
+}
+
+/* Remove the inner wrapper background */
+.comment-pane-markdown [data-streamdown="mermaid-block"] > div:last-child {
+ background: transparent;
+ border: none;
+}
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/index.ts b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/index.ts
new file mode 100644
index 00000000000..ed0e956694b
--- /dev/null
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/CommentPane/index.ts
@@ -0,0 +1 @@
+export { CommentPane } from "./CommentPane";
diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx
index 49b9b266c65..aa85c5c283f 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/usePaneRegistry.tsx
@@ -15,8 +15,10 @@ import {
TerminalSquare,
} from "lucide-react";
import { useMemo } from "react";
+import { FaGithub } from "react-icons/fa";
import {
LuArrowDownToLine,
+ LuArrowUpRight,
LuClipboard,
LuClipboardCopy,
LuEraser,
@@ -29,6 +31,7 @@ import { useSettings } from "renderer/stores/settings";
import type {
BrowserPaneData,
ChatPaneData,
+ CommentPaneData,
DevtoolsPaneData,
FilePaneData,
PaneViewerData,
@@ -40,6 +43,7 @@ import {
browserRuntimeRegistry,
} from "./components/BrowserPane";
import { ChatPane } from "./components/ChatPane";
+import { CommentPane } from "./components/CommentPane";
import { DiffPane } from "./components/DiffPane";
import { FilePane } from "./components/FilePane";
import { TerminalPane } from "./components/TerminalPane";
@@ -301,6 +305,44 @@ export function usePaneRegistry(
d.key === "close-pane" ? { ...d, label: "Close Chat" } : d,
),
},
+ comment: {
+ getIcon: (ctx: RendererContext
+
+ {children}
+
+
+