Merge pull request #308 from AutoMaker-Org/feat/github-issue-comments

feat: add GitHub issue comments display and AI validation integration

apps/ui/src/components/views/github-issues-view.tsx

@@ -11,12 +11,15 @@ import { useGithubIssues, useIssueValidation } from './github-issues-view/hooks'
 import { IssueRow, IssueDetailPanel, IssuesListHeader } from './github-issues-view/components';
 import { ValidationDialog } from './github-issues-view/dialogs';
 import { formatDate, getFeaturePriority } from './github-issues-view/utils';
+import type { ValidateIssueOptions } from './github-issues-view/types';
 
 export function GitHubIssuesView() {
   const [selectedIssue, setSelectedIssue] = useState<GitHubIssue | null>(null);
   const [validationResult, setValidationResult] = useState<IssueValidationResult | null>(null);
   const [showValidationDialog, setShowValidationDialog] = useState(false);
   const [showRevalidateConfirm, setShowRevalidateConfirm] = useState(false);
+  const [pendingRevalidateOptions, setPendingRevalidateOptions] =
+    useState<ValidateIssueOptions | null>(null);
 
   const { currentProject, defaultAIProfileId, aiProfiles, getCurrentWorktree, worktreesByProject } =
     useAppStore();
@@ -203,7 +206,10 @@ export function GitHubIssuesView() {
           onViewCachedValidation={handleViewCachedValidation}
           onOpenInGitHub={handleOpenInGitHub}
           onClose={() => setSelectedIssue(null)}
-          onShowRevalidateConfirm={() => setShowRevalidateConfirm(true)}
+          onShowRevalidateConfirm={(options) => {
+            setPendingRevalidateOptions(options);
+            setShowRevalidateConfirm(true);
+          }}
           formatDate={formatDate}
         />
       )}
@@ -220,15 +226,24 @@ export function GitHubIssuesView() {
       {/* Revalidate Confirmation Dialog */}
       <ConfirmDialog
         open={showRevalidateConfirm}
-        onOpenChange={setShowRevalidateConfirm}
+        onOpenChange={(open) => {
+          setShowRevalidateConfirm(open);
+          if (!open) {
+            setPendingRevalidateOptions(null);
+          }
+        }}
         title="Re-validate Issue"
         description={`Are you sure you want to re-validate issue #${selectedIssue?.number}? This will run a new AI analysis and replace the existing validation result.`}
         icon={RefreshCw}
         iconClassName="text-primary"
         confirmText="Re-validate"
         onConfirm={() => {
-          if (selectedIssue) {
-            handleValidateIssue(selectedIssue, { forceRevalidate: true });
+          if (selectedIssue && pendingRevalidateOptions) {
+            console.log('[GitHubIssuesView] Revalidating with options:', {
+              commentsCount: pendingRevalidateOptions.comments?.length ?? 0,
+              linkedPRsCount: pendingRevalidateOptions.linkedPRs?.length ?? 0,
+            });
+            handleValidateIssue(selectedIssue, pendingRevalidateOptions);
           }
         }}
       />

apps/ui/src/components/views/github-issues-view/components/comment-item.tsx

@@ -0,0 +1,40 @@
+import { User } from 'lucide-react';
+import { Markdown } from '@/components/ui/markdown';
+import type { GitHubComment } from '@/lib/electron';
+import { formatDate } from '../utils';
+
+interface CommentItemProps {
+  comment: GitHubComment;
+}
+
+export function CommentItem({ comment }: CommentItemProps) {
+  return (
+    <div className="p-3 rounded-lg bg-background border border-border">
+      {/* Comment Header */}
+      <div className="flex items-center gap-2 mb-2">
+        {comment.author.avatarUrl ? (
+          <img
+            src={comment.author.avatarUrl}
+            alt={comment.author.login}
+            className="h-6 w-6 rounded-full"
+          />
+        ) : (
+          <div className="h-6 w-6 rounded-full bg-muted flex items-center justify-center">
+            <User className="h-3 w-3 text-muted-foreground" />
+          </div>
+        )}
+        <span className="text-sm font-medium">{comment.author.login}</span>
+        <span className="text-xs text-muted-foreground">
+          commented {formatDate(comment.createdAt)}
+        </span>
+      </div>
+
+      {/* Comment Body */}
+      {comment.body ? (
+        <Markdown className="text-sm">{comment.body}</Markdown>
+      ) : (
+        <p className="text-sm text-muted-foreground italic">No content</p>
+      )}
+    </div>
+  );
+}

apps/ui/src/components/views/github-issues-view/components/index.ts

@@ -1,3 +1,4 @@
 export { IssueRow } from './issue-row';
 export { IssueDetailPanel } from './issue-detail-panel';
 export { IssuesListHeader } from './issues-list-header';
+export { CommentItem } from './comment-item';

apps/ui/src/components/views/github-issues-view/components/issue-detail-panel.tsx

@@ -10,12 +10,19 @@ import {
   GitPullRequest,
   User,
   RefreshCw,
+  MessageSquare,
+  ChevronDown,
+  ChevronUp,
 } from 'lucide-react';
+import { useState } from 'react';
 import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
 import { Markdown } from '@/components/ui/markdown';
 import { cn } from '@/lib/utils';
 import type { IssueDetailPanelProps } from '../types';
 import { isValidationStale } from '../utils';
+import { useIssueComments } from '../hooks';
+import { CommentItem } from './comment-item';
 
 export function IssueDetailPanel({
   issue,
@@ -32,6 +39,32 @@ export function IssueDetailPanel({
   const cached = cachedValidations.get(issue.number);
   const isStale = cached ? isValidationStale(cached.validatedAt) : false;
 
+  // Comments state
+  const [commentsExpanded, setCommentsExpanded] = useState(true);
+  const [includeCommentsInAnalysis, setIncludeCommentsInAnalysis] = useState(true);
+  const {
+    comments,
+    totalCount,
+    loading: commentsLoading,
+    loadingMore,
+    hasNextPage,
+    error: commentsError,
+    loadMore,
+  } = useIssueComments(issue.number);
+
+  // Helper to get validation options with comments and linked PRs
+  const getValidationOptions = (forceRevalidate = false) => {
+    return {
+      forceRevalidate,
+      comments: includeCommentsInAnalysis && comments.length > 0 ? comments : undefined,
+      linkedPRs: issue.linkedPRs?.map((pr) => ({
+        number: pr.number,
+        title: pr.title,
+        state: pr.state,
+      })),
+    };
+  };
+
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
       {/* Detail Header */}
@@ -67,7 +100,7 @@ export function IssueDetailPanel({
                   <Button
                     variant="ghost"
                     size="sm"
-                    onClick={onShowRevalidateConfirm}
+                    onClick={() => onShowRevalidateConfirm(getValidationOptions(true))}
                     title="Re-validate"
                   >
                     <RefreshCw className="h-4 w-4" />
@@ -86,7 +119,7 @@ export function IssueDetailPanel({
                   <Button
                     variant="default"
                     size="sm"
-                    onClick={() => onValidateIssue(issue, { forceRevalidate: true })}
+                    onClick={() => onValidateIssue(issue, getValidationOptions(true))}
                   >
                     <Wand2 className="h-4 w-4 mr-1" />
                     Re-validate
@@ -96,7 +129,11 @@ export function IssueDetailPanel({
             }
 
             return (
-              <Button variant="default" size="sm" onClick={() => onValidateIssue(issue)}>
+              <Button
+                variant="default"
+                size="sm"
+                onClick={() => onValidateIssue(issue, getValidationOptions())}
+              >
                 <Wand2 className="h-4 w-4 mr-1" />
                 Validate with AI
               </Button>
@@ -226,6 +263,74 @@ export function IssueDetailPanel({
           <p className="text-sm text-muted-foreground italic">No description provided.</p>
         )}
 
+        {/* Comments Section */}
+        <div className="mt-6 p-3 rounded-lg bg-muted/30 border border-border">
+          <div className="flex items-center justify-between">
+            <button
+              className="flex items-center gap-2 text-left"
+              onClick={() => setCommentsExpanded(!commentsExpanded)}
+            >
+              <MessageSquare className="h-4 w-4 text-blue-500" />
+              <span className="text-sm font-medium">
+                Comments {totalCount > 0 && `(${totalCount})`}
+              </span>
+              {commentsLoading && (
+                <Loader2 className="h-3 w-3 animate-spin text-muted-foreground" />
+              )}
+              {commentsExpanded ? (
+                <ChevronUp className="h-4 w-4 text-muted-foreground" />
+              ) : (
+                <ChevronDown className="h-4 w-4 text-muted-foreground" />
+              )}
+            </button>
+            {comments.length > 0 && (
+              <label className="flex items-center gap-2 text-xs text-muted-foreground cursor-pointer">
+                <Checkbox
+                  checked={includeCommentsInAnalysis}
+                  onCheckedChange={setIncludeCommentsInAnalysis}
+                />
+                Include in AI analysis
+              </label>
+            )}
+          </div>
+
+          {commentsExpanded && (
+            <div className="mt-3">
+              {commentsError ? (
+                <p className="text-sm text-red-500">{commentsError}</p>
+              ) : comments.length === 0 && !commentsLoading ? (
+                <p className="text-sm text-muted-foreground italic">No comments yet.</p>
+              ) : (
+                <div className="space-y-3">
+                  {comments.map((comment) => (
+                    <CommentItem key={comment.id} comment={comment} />
+                  ))}
+
+                  {/* Load More Button */}
+                  {hasNextPage && (
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="w-full"
+                      onClick={loadMore}
+                      disabled={loadingMore}
+                    >
+                      {loadingMore ? (
+                        <>
+                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                          Loading...
+                        </>
+                      ) : (
+                        'Load More Comments'
+                      )}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
         {/* Open in GitHub CTA */}
         <div className="mt-8 p-4 rounded-lg bg-muted/50 border border-border">
           <p className="text-sm text-muted-foreground mb-3">

apps/ui/src/components/views/github-issues-view/dialogs/validation-dialog.tsx

@@ -16,6 +16,9 @@ import {
   Lightbulb,
   AlertTriangle,
   Plus,
+  GitPullRequest,
+  Clock,
+  Wrench,
 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import type {
@@ -149,6 +152,77 @@ export function ValidationDialog({
               </div>
             )}
 
+            {/* PR Analysis Section - Show AI's analysis of linked PRs */}
+            {validationResult.prAnalysis && validationResult.prAnalysis.hasOpenPR && (
+              <div
+                className={cn(
+                  'p-3 rounded-lg border',
+                  validationResult.prAnalysis.recommendation === 'wait_for_merge'
+                    ? 'bg-green-500/10 border-green-500/20'
+                    : validationResult.prAnalysis.recommendation === 'pr_needs_work'
+                      ? 'bg-yellow-500/10 border-yellow-500/20'
+                      : 'bg-purple-500/10 border-purple-500/20'
+                )}
+              >
+                <div className="flex items-start gap-2">
+                  {validationResult.prAnalysis.recommendation === 'wait_for_merge' ? (
+                    <Clock className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
+                  ) : validationResult.prAnalysis.recommendation === 'pr_needs_work' ? (
+                    <Wrench className="h-5 w-5 text-yellow-500 shrink-0 mt-0.5" />
+                  ) : (
+                    <GitPullRequest className="h-5 w-5 text-purple-500 shrink-0 mt-0.5" />
+                  )}
+                  <div className="flex-1">
+                    <span
+                      className={cn(
+                        'text-sm font-medium',
+                        validationResult.prAnalysis.recommendation === 'wait_for_merge'
+                          ? 'text-green-500'
+                          : validationResult.prAnalysis.recommendation === 'pr_needs_work'
+                            ? 'text-yellow-500'
+                            : 'text-purple-500'
+                      )}
+                    >
+                      {validationResult.prAnalysis.recommendation === 'wait_for_merge'
+                        ? 'Fix Ready - Wait for Merge'
+                        : validationResult.prAnalysis.recommendation === 'pr_needs_work'
+                          ? 'PR Needs Work'
+                          : 'Work in Progress'}
+                    </span>
+                    {validationResult.prAnalysis.prNumber && (
+                      <p className="text-xs text-muted-foreground mt-0.5">
+                        PR #{validationResult.prAnalysis.prNumber}
+                        {validationResult.prAnalysis.prFixesIssue && ' appears to fix this issue'}
+                      </p>
+                    )}
+                    {validationResult.prAnalysis.prSummary && (
+                      <p className="text-xs text-muted-foreground mt-1">
+                        {validationResult.prAnalysis.prSummary}
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Fallback Work in Progress Badge - Show when there's an open PR but no AI analysis */}
+            {!validationResult.prAnalysis?.hasOpenPR &&
+              issue.linkedPRs?.some((pr) => pr.state === 'open' || pr.state === 'OPEN') && (
+                <div className="flex items-center gap-2 p-3 rounded-lg bg-purple-500/10 border border-purple-500/20">
+                  <GitPullRequest className="h-5 w-5 text-purple-500 shrink-0" />
+                  <div className="flex-1">
+                    <span className="text-sm font-medium text-purple-500">Work in Progress</span>
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {issue.linkedPRs
+                        .filter((pr) => pr.state === 'open' || pr.state === 'OPEN')
+                        .map((pr) => `PR #${pr.number}`)
+                        .join(', ')}{' '}
+                      is open for this issue
+                    </p>
+                  </div>
+                </div>
+              )}
+
             {/* Reasoning */}
             <div className="space-y-2">
               <h4 className="text-sm font-medium flex items-center gap-2">
@@ -218,12 +292,14 @@ export function ValidationDialog({
           <Button variant="ghost" onClick={() => onOpenChange(false)}>
             Close
           </Button>
-          {validationResult?.verdict === 'valid' && onConvertToTask && (
-            <Button onClick={handleConvertToTask}>
-              <Plus className="h-4 w-4 mr-2" />
-              Convert to Task
-            </Button>
-          )}
+          {validationResult?.verdict === 'valid' &&
+            onConvertToTask &&
+            validationResult?.prAnalysis?.recommendation !== 'wait_for_merge' && (
+              <Button onClick={handleConvertToTask}>
+                <Plus className="h-4 w-4 mr-2" />
+                Convert to Task
+              </Button>
+            )}
         </DialogFooter>
       </DialogContent>
     </Dialog>

apps/ui/src/components/views/github-issues-view/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useGithubIssues } from './use-github-issues';
 export { useIssueValidation } from './use-issue-validation';
+export { useIssueComments } from './use-issue-comments';

apps/ui/src/components/views/github-issues-view/hooks/use-issue-comments.ts

@@ -0,0 +1,134 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { getElectronAPI, GitHubComment } from '@/lib/electron';
+import { useAppStore } from '@/store/app-store';
+
+interface UseIssueCommentsResult {
+  comments: GitHubComment[];
+  totalCount: number;
+  loading: boolean;
+  loadingMore: boolean;
+  hasNextPage: boolean;
+  error: string | null;
+  loadMore: () => void;
+  refresh: () => void;
+}
+
+export function useIssueComments(issueNumber: number | null): UseIssueCommentsResult {
+  const { currentProject } = useAppStore();
+  const [comments, setComments] = useState<GitHubComment[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [hasNextPage, setHasNextPage] = useState(false);
+  const [endCursor, setEndCursor] = useState<string | undefined>(undefined);
+  const [error, setError] = useState<string | null>(null);
+  const isMountedRef = useRef(true);
+
+  const fetchComments = useCallback(
+    async (cursor?: string) => {
+      if (!currentProject?.path || !issueNumber) {
+        return;
+      }
+
+      const isLoadingMore = !!cursor;
+
+      try {
+        if (isMountedRef.current) {
+          setError(null);
+          if (isLoadingMore) {
+            setLoadingMore(true);
+          } else {
+            setLoading(true);
+          }
+        }
+
+        const api = getElectronAPI();
+        if (api.github) {
+          const result = await api.github.getIssueComments(
+            currentProject.path,
+            issueNumber,
+            cursor
+          );
+
+          if (isMountedRef.current) {
+            if (result.success) {
+              if (isLoadingMore) {
+                // Append new comments
+                setComments((prev) => [...prev, ...(result.comments || [])]);
+              } else {
+                // Replace all comments
+                setComments(result.comments || []);
+              }
+              setTotalCount(result.totalCount || 0);
+              setHasNextPage(result.hasNextPage || false);
+              setEndCursor(result.endCursor);
+            } else {
+              setError(result.error || 'Failed to fetch comments');
+            }
+          }
+        }
+      } catch (err) {
+        if (isMountedRef.current) {
+          console.error('[useIssueComments] Error fetching comments:', err);
+          setError(err instanceof Error ? err.message : 'Failed to fetch comments');
+        }
+      } finally {
+        if (isMountedRef.current) {
+          setLoading(false);
+          setLoadingMore(false);
+        }
+      }
+    },
+    [currentProject?.path, issueNumber]
+  );
+
+  // Reset and fetch when issue changes
+  useEffect(() => {
+    isMountedRef.current = true;
+
+    if (issueNumber) {
+      // Reset state when issue changes
+      setComments([]);
+      setTotalCount(0);
+      setHasNextPage(false);
+      setEndCursor(undefined);
+      setError(null);
+      fetchComments();
+    } else {
+      // Clear comments when no issue is selected
+      setComments([]);
+      setTotalCount(0);
+      setHasNextPage(false);
+      setEndCursor(undefined);
+      setLoading(false);
+      setError(null);
+    }
+
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [issueNumber, fetchComments]);
+
+  const loadMore = useCallback(() => {
+    if (hasNextPage && endCursor && !loadingMore) {
+      fetchComments(endCursor);
+    }
+  }, [hasNextPage, endCursor, loadingMore, fetchComments]);
+
+  const refresh = useCallback(() => {
+    setComments([]);
+    setEndCursor(undefined);
+    fetchComments();
+  }, [fetchComments]);
+
+  return {
+    comments,
+    totalCount,
+    loading,
+    loadingMore,
+    hasNextPage,
+    error,
+    loadMore,
+    refresh,
+  };
+}

apps/ui/src/components/views/github-issues-view/hooks/use-issue-validation.ts

@@ -2,10 +2,12 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import {
   getElectronAPI,
   GitHubIssue,
+  GitHubComment,
   IssueValidationResult,
   IssueValidationEvent,
   StoredValidation,
 } from '@/lib/electron';
+import type { LinkedPRInfo } from '@automaker/types';
 import { useAppStore } from '@/store/app-store';
 import { toast } from 'sonner';
 import { isValidationStale } from '../utils';
@@ -205,8 +207,15 @@ export function useIssueValidation({
   }, []);
 
   const handleValidateIssue = useCallback(
-    async (issue: GitHubIssue, options: { forceRevalidate?: boolean } = {}) => {
-      const { forceRevalidate = false } = options;
+    async (
+      issue: GitHubIssue,
+      options: {
+        forceRevalidate?: boolean;
+        comments?: GitHubComment[];
+        linkedPRs?: LinkedPRInfo[];
+      } = {}
+    ) => {
+      const { forceRevalidate = false, comments, linkedPRs } = options;
 
       if (!currentProject?.path) {
         toast.error('No project selected');
@@ -236,14 +245,17 @@ export function useIssueValidation({
       try {
         const api = getElectronAPI();
         if (api.github?.validateIssue) {
+          const validationInput = {
+            issueNumber: issue.number,
+            issueTitle: issue.title,
+            issueBody: issue.body || '',
+            issueLabels: issue.labels.map((l) => l.name),
+            comments, // Include comments if provided
+            linkedPRs, // Include linked PRs if provided
+          };
           const result = await api.github.validateIssue(
             currentProject.path,
-            {
-              issueNumber: issue.number,
-              issueTitle: issue.title,
-              issueBody: issue.body || '',
-              issueLabels: issue.labels.map((l) => l.name),
-            },
+            validationInput,
             validationModel
           );
 

apps/ui/src/components/views/github-issues-view/types.ts

@@ -1,4 +1,5 @@
-import type { GitHubIssue, StoredValidation } from '@/lib/electron';
+import type { GitHubIssue, StoredValidation, GitHubComment } from '@/lib/electron';
+import type { LinkedPRInfo } from '@automaker/types';
 
 export interface IssueRowProps {
   issue: GitHubIssue;
@@ -12,17 +13,25 @@ export interface IssueRowProps {
   isValidating?: boolean;
 }
 
+/** Options for issue validation */
+export interface ValidateIssueOptions {
+  showDialog?: boolean;
+  forceRevalidate?: boolean;
+  /** Include comments in AI analysis */
+  comments?: GitHubComment[];
+  /** Linked pull requests */
+  linkedPRs?: LinkedPRInfo[];
+}
+
 export interface IssueDetailPanelProps {
   issue: GitHubIssue;
   validatingIssues: Set<number>;
   cachedValidations: Map<number, StoredValidation>;
-  onValidateIssue: (
-    issue: GitHubIssue,
-    options?: { showDialog?: boolean; forceRevalidate?: boolean }
-  ) => Promise<void>;
+  onValidateIssue: (issue: GitHubIssue, options?: ValidateIssueOptions) => Promise<void>;
   onViewCachedValidation: (issue: GitHubIssue) => Promise<void>;
   onOpenInGitHub: (url: string) => void;
   onClose: () => void;
-  onShowRevalidateConfirm: () => void;
+  /** Called when user wants to revalidate - receives the validation options including comments/linkedPRs */
+  onShowRevalidateConfirm: (options: ValidateIssueOptions) => void;
   formatDate: (date: string) => string;
 }

apps/ui/src/lib/electron.ts

@@ -11,6 +11,8 @@ import type {
   IssueValidationEvent,
   StoredValidation,
   AgentModel,
+  GitHubComment,
+  IssueCommentsResult,
 } from '@automaker/types';
 import { getJSON, setJSON, removeItem } from './storage';
 
@@ -24,6 +26,8 @@ export type {
   IssueValidationResponse,
   IssueValidationEvent,
   StoredValidation,
+  GitHubComment,
+  IssueCommentsResult,
 };
 
 export interface FileEntry {
@@ -234,6 +238,19 @@ export interface GitHubAPI {
   ) => Promise<{ success: boolean; error?: string }>;
   /** Subscribe to validation events */
   onValidationEvent: (callback: (event: IssueValidationEvent) => void) => () => void;
+  /** Fetch comments for a specific issue */
+  getIssueComments: (
+    projectPath: string,
+    issueNumber: number,
+    cursor?: string
+  ) => Promise<{
+    success: boolean;
+    comments?: GitHubComment[];
+    totalCount?: number;
+    hasNextPage?: boolean;
+    endCursor?: string;
+    error?: string;
+  }>;
 }
 
 // Feature Suggestions types
@@ -2786,6 +2803,15 @@ function createMockGitHubAPI(): GitHubAPI {
         mockValidationCallbacks = mockValidationCallbacks.filter((cb) => cb !== callback);
       };
     },
+    getIssueComments: async (projectPath: string, issueNumber: number, cursor?: string) => {
+      console.log('[Mock] Getting issue comments:', { projectPath, issueNumber, cursor });
+      return {
+        success: true,
+        comments: [],
+        totalCount: 0,
+        hasNextPage: false,
+      };
+    },
   };
 }
 

apps/ui/src/lib/http-api-client.ts

@@ -766,6 +766,8 @@ export class HttpApiClient implements ElectronAPI {
       this.post('/api/github/validation-mark-viewed', { projectPath, issueNumber }),
     onValidationEvent: (callback: (event: IssueValidationEvent) => void) =>
       this.subscribeToEvent('issue-validation:event', callback as EventCallback),
+    getIssueComments: (projectPath: string, issueNumber: number, cursor?: string) =>
+      this.post('/api/github/issue-comments', { projectPath, issueNumber, cursor }),
   };
 
   // Workspace API