Added run detail and suspense

[yusufaytas]

No description provided.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR enhances the orchestration UI by adding Suspense boundaries to detail pages and significantly improving the run detail display.

Key Changes:

1. Suspense Boundaries Added: Wrapped PlanDetail and RunDetail components with React Suspense to provide loading states during async operations, improving perceived performance and user experience.

2. Enhanced Run Detail UI: Completely redesigned the run header section with:

   • Display of plan title as the primary heading (instead of just run ID)
   • Plan description shown prominently below the title
   • Responsive grid layout that adapts between mobile and desktop views
   • Reorganized action buttons (View plan, Open in Tool) with improved styling
   • Additional metadata display including plan version and tags

3. Code Cleanup: Removed unused React imports and cleaned up trailing whitespace for better code hygiene.

Impact: The changes make the run detail page more informative by surfacing plan metadata directly, reducing the need for users to navigate to the plan page separately. The Suspense boundaries improve the loading experience with consistent loading states across the application.

Confidence Score: 5/5

• Safe to merge - UI enhancement with proper defensive coding patterns
• The changes are primarily UI improvements with proper error handling. Suspense boundaries are correctly implemented with fallback UI. The RunDetail component maintains existing functionality while adding new display features. The code follows existing patterns in PlanDetail.tsx for handling tags and metadata. No breaking changes or risky logic modifications.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
app/(oss)/orchestration/plans/[planId]/page.tsx	5/5	Added Suspense boundary with loading fallback for PlanDetail component, removed unused React import
app/(oss)/orchestration/plans/page.tsx	5/5	Removed unused React import and trailing whitespace
app/(oss)/orchestration/runs/[runId]/page.tsx	5/5	Added Suspense boundary with loading fallback for RunDetail component, improved imports
app/(oss)/orchestration/runs/page.tsx	5/5	Removed unused React import and cleaned up trailing whitespace
app/components/RunDetail.tsx	4/5	Redesigned run header UI with better layout, added plan metadata display (title, description, version, tags), improved responsive design with grid layout and action buttons

Sequence Diagram

sequenceDiagram
    participant User
    participant RunDetailPage
    participant Suspense
    participant RunDetail
    participant API
    participant PlanAPI

    User->>RunDetailPage: Navigate to /runs/[runId]
    RunDetailPage->>Suspense: Wrap RunDetail
    Suspense->>RunDetail: Render (or show fallback)
    
    alt Loading State
        Suspense-->>User: Show "Loading..." fallback
    end
    
    RunDetail->>API: getRun(runId)
    API-->>RunDetail: OrchestrationRun data
    
    RunDetail->>PlanAPI: getPlan(run.planId)
    PlanAPI-->>RunDetail: OrchestrationPlan data
    
    RunDetail->>RunDetail: Display run header with plan metadata
    Note over RunDetail: Shows plan.title, plan.description,<br/>plan.version, plan.tags
    
    RunDetail->>RunDetail: Render workflow visualizer
    RunDetail->>RunDetail: Render step timeline
    
    RunDetail-->>User: Complete run detail view

Loading

[greptile-apps]

[P3] The check plan && Object.keys(plan.tags).length > 0 could be more defensive. If plan.tags is undefined or null (despite the type definition), this will throw a runtime error. Consider using optional chaining: plan?.tags && Object.keys(plan.tags).length > 0

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review.
Path: app/components/RunDetail.tsx
Line: 257:257

Comment:
[P3] The check `plan && Object.keys(plan.tags).length > 0` could be more defensive. If `plan.tags` is undefined or null (despite the type definition), this will throw a runtime error. Consider using optional chaining: `plan?.tags && Object.keys(plan.tags).length > 0`

<sub>Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!</sub>

How can I resolve this? If you propose a fix, please make it concise.