From 65319f93b4654be730d2c0b32d4733f7a3cc5e79 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Tue, 23 Dec 2025 22:49:37 +0100
Subject: [PATCH] feat: Improve GitHub issues view with validation indicators
 and Markdown support

- Added an `isValidating` prop to the `IssueRow` component to indicate ongoing validation for issues.
- Introduced a visual indicator for validation in progress, enhancing user feedback during analysis.
- Updated the `ValidationDialog` to render validation reasoning and suggested fixes using Markdown for better formatting and readability.
---
 .../src/components/views/github-issues-view.tsx   | 15 ++++++++++++++-
 .../github-issues-view/validation-dialog.tsx      | 13 +++++++------
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/apps/ui/src/components/views/github-issues-view.tsx b/apps/ui/src/components/views/github-issues-view.tsx
index 70dfb41e..4923407b 100644
--- a/apps/ui/src/components/views/github-issues-view.tsx
+++ b/apps/ui/src/components/views/github-issues-view.tsx
@@ -493,6 +493,7 @@ export function GitHubIssuesView() {
                   onOpenExternal={() => handleOpenInGitHub(issue.url)}
                   formatDate={formatDate}
                   cachedValidation={cachedValidations.get(issue.number)}
+                  isValidating={validatingIssues.has(issue.number)}
                 />
               ))}
 
@@ -511,6 +512,7 @@ export function GitHubIssuesView() {
                       onOpenExternal={() => handleOpenInGitHub(issue.url)}
                       formatDate={formatDate}
                       cachedValidation={cachedValidations.get(issue.number)}
+                      isValidating={validatingIssues.has(issue.number)}
                     />
                   ))}
                 </>
@@ -776,6 +778,8 @@ interface IssueRowProps {
   formatDate: (date: string) => string;
   /** Cached validation for this issue (if any) */
   cachedValidation?: StoredValidation | null;
+  /** Whether validation is currently running for this issue */
+  isValidating?: boolean;
 }
 
 function IssueRow({
@@ -785,6 +789,7 @@ function IssueRow({
   onOpenExternal,
   formatDate,
   cachedValidation,
+  isValidating,
 }: IssueRowProps) {
   // Check if validation is unviewed (exists, not stale, not viewed)
   const hasUnviewedValidation =
@@ -852,8 +857,16 @@ function IssueRow({
             </span>
           )}
 
+          {/* Validating indicator */}
+          {isValidating && (
+            <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-primary/10 text-primary border border-primary/20 animate-in fade-in duration-200">
+              <Loader2 className="h-3 w-3 animate-spin" />
+              Analyzing...
+            </span>
+          )}
+
           {/* Unviewed validation indicator */}
-          {hasUnviewedValidation && (
+          {!isValidating && hasUnviewedValidation && (
             <span className="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-amber-500/10 text-amber-500 border border-amber-500/20 animate-in fade-in duration-200">
               <Sparkles className="h-3 w-3" />
               Analysis Ready
diff --git a/apps/ui/src/components/views/github-issues-view/validation-dialog.tsx b/apps/ui/src/components/views/github-issues-view/validation-dialog.tsx
index 5002d27a..1f8374e9 100644
--- a/apps/ui/src/components/views/github-issues-view/validation-dialog.tsx
+++ b/apps/ui/src/components/views/github-issues-view/validation-dialog.tsx
@@ -7,6 +7,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { Markdown } from '@/components/ui/markdown';
 import {
   CheckCircle2,
   XCircle,
@@ -162,9 +163,9 @@ export function ValidationDialog({
                 <Lightbulb className="h-4 w-4 text-muted-foreground" />
                 Analysis
               </h4>
-              <p className="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap">
-                {validationResult.reasoning}
-              </p>
+              <div className="bg-muted/30 p-3 rounded-lg border border-border">
+                <Markdown>{validationResult.reasoning}</Markdown>
+              </div>
             </div>
 
             {/* Related Files */}
@@ -191,9 +192,9 @@ export function ValidationDialog({
             {validationResult.suggestedFix && (
               <div className="space-y-2">
                 <h4 className="text-sm font-medium">Suggested Approach</h4>
-                <p className="text-sm text-muted-foreground leading-relaxed whitespace-pre-wrap bg-muted/30 p-3 rounded-lg border border-border">
-                  {validationResult.suggestedFix}
-                </p>
+                <div className="bg-muted/30 p-3 rounded-lg border border-border">
+                  <Markdown>{validationResult.suggestedFix}</Markdown>
+                </div>
               </div>
             )}