Reviewing files that changed from the base of the PR and between 3bc2631 and 36636a7.

• src/app/components/columns.tsx (1 hunks)
• src/app/pipelines/PipelinesTab/DeletePipelineAlert.tsx (1 hunks)
• src/app/pipelines/RunsTab/DeleteRunAlert.tsx (1 hunks)
• src/app/pipelines/RunsTab/columns.tsx (1 hunks)
• src/app/runs/[id]/Header.tsx (2 hunks)
• src/app/runs/[id]/RunActionMenu.tsx (2 hunks)
• src/app/runs/[id]/_Tabs/Configuration/EnvironmentCollapsible.tsx (2 hunks)
• src/app/runs/[id]/_Tabs/Configuration/ParameterCollapsible.tsx (2 hunks)
• src/app/runs/[id]/_Tabs/Configuration/index.tsx (1 hunks)
• src/app/settings/members/columns.tsx (1 hunks)
• src/app/settings/page.tsx (2 hunks)
• src/app/settings/profile/page.tsx (1 hunks)
• src/app/settings/secrets/columns.tsx (1 hunks)
• src/app/settings/service-accounts/DeleteAlert.tsx (1 hunks)
• src/app/settings/service-accounts/[service-account-id]/DeleteApiKeyDialog.tsx (1 hunks)
• src/app/stacks/columns.tsx (1 hunks)
• src/app/stacks/create/components/sharedSchema.ts (1 hunks)
• src/components/CollapsibleCard.tsx (3 hunks)
• src/components/MetadataCards.tsx (2 hunks)
• src/components/NestedCollapsible.tsx (5 hunks)
• src/components/artifacts/artifact-node-sheet/DetailCards.tsx (4 hunks)
• src/components/artifacts/artifact-node-sheet/MetadataTab.tsx (1 hunks)
• src/components/artifacts/artifact-node-sheet/SheetContent.tsx (2 hunks)
• src/components/buttons/update-button-content.tsx (1 hunks)
• src/components/copy-metadata-button.tsx (1 hunks)
• src/components/dag-visualizer/PreviewArtifact.tsx (1 hunks)
• src/components/not-available.tsx (1 hunks)
• src/components/runs/refresh-group/deep-refresh.ts (1 hunks)
• src/components/runs/refresh-group/dropdown.tsx (1 hunks)
• src/components/runs/refresh-group/index.tsx (1 hunks)
• src/components/service-connectors/connector-tag.tsx (1 hunks)
• src/components/sheet/SheetHeader.tsx (1 hunks)
• src/components/stack-components/component-detail/ConfigTab.tsx (4 hunks)
• src/components/stack-components/component-detail/Header.tsx (4 hunks)
• src/components/stack-components/component-sheet/index.tsx (2 hunks)
• src/components/stacks/Sheet/index.tsx (2 hunks)
• src/components/stacks/Sheet/update-stacks-dialog.tsx (1 hunks)
• src/components/steps/step-sheet/SheetContent.tsx (2 hunks)
• src/data/pipeline-runs/fetch-orchestrator-run.ts (1 hunks)
• src/data/pipeline-runs/pipeline-run-detail-query.ts (1 hunks)
• src/layouts/AuthenticatedLayout/UserDropdown.tsx (1 hunks)
• src/lib/copy.ts (1 hunks)
• src/types/pipeline-runs.ts (1 hunks)

src/app/stacks/create/components/sharedSchema.ts (1)

8-8: Improved stack name validation by increasing maximum length

Great enhancement to increase the maximum allowed stack name length from 32 to 255 characters. This provides users with more flexibility in naming their stacks and aligns with common string length limits in databases and APIs.

src/components/dag-visualizer/PreviewArtifact.tsx (1)

29-29: Added text size styling for better readability

Adding the text-text-sm class improves visual hierarchy and ensures consistent text styling across the application.

src/app/settings/service-accounts/DeleteAlert.tsx (1)

24-24: Improved border styling consistency

Changing from border-none to border-y-0 maintains the left and right borders while removing top and bottom borders, creating a more consistent button appearance across the application.

src/app/settings/service-accounts/[service-account-id]/DeleteApiKeyDialog.tsx (1)

24-24: Improved border styling consistency

Changing from border-none to border-y-0 maintains the left and right borders while removing top and bottom borders, creating a more consistent button appearance across the application.

src/components/artifacts/artifact-node-sheet/SheetContent.tsx (1)

16-16: Simplified header implementation using the SheetHeader component

Replaced the custom header implementation with the reusable SheetHeader component, which improves code maintainability and ensures UI consistency across sheets in the application.

This refactoring aligns with similar changes in other sheet components, creating a unified approach to header rendering throughout the application.

Also applies to: 33-33

src/app/settings/members/columns.tsx (1)

73-73: Simplified user name access

Removed dependency on the getUsername helper function by directly accessing row.name, which simplifies the code and makes it more maintainable.

This change is part of a broader effort to standardize how user names are accessed throughout the application.

src/app/pipelines/PipelinesTab/DeletePipelineAlert.tsx (2)

18-18: Improved component composition with asChild prop

The addition of the asChild prop to AlertDialogTrigger eliminates an unnecessary wrapper element, improving both performance and DOM structure. This is a good practice when working with compound components.

---

20-20: Refined border styling for better visual consistency

Changing from border-none to border-y-0 allows the button to maintain left and right borders while removing top and bottom borders. This creates a more consistent styling pattern with other similar components throughout the application.

src/app/pipelines/RunsTab/DeleteRunAlert.tsx (2)

18-18: Improved component composition with asChild prop

The addition of the asChild prop to AlertDialogTrigger eliminates an unnecessary wrapper element, improving both performance and DOM structure. This matches the pattern now used in DeletePipelineAlert.tsx and other dialog components.

---

20-20: Refined border styling for better visual consistency

Changing from border-none to border-y-0 maintains left and right borders while removing top and bottom borders, creating a more consistent styling pattern across alert dialogs in the application.

src/app/settings/page.tsx (2)

1-3: Improved import organization

Reordering imports to group related components together improves readability and maintenance. The removal of the getUsername import aligns with the simplified approach to accessing user data.

---

22-22:

✅ Verification successful

Simplified user data access

Directly using data.name instead of calling getUsername(data) simplifies the code and reduces unnecessary abstraction. This change aligns with similar simplifications across the codebase.

Consider adding a safeguard against potential undefined or null values, as the component would fail if data.name is undefined:

---

🏁 Script executed:

#!/bin/bash
# Check if there are any safeguards for undefined name properties elsewhere
rg -A2 -B2 "data.name" --type=tsx --type=jsx

Length of output: 72

---

Let's search all JSX/TSX files without type filters to see if data.name is ever guarded:

---

🏁 Script executed:

#!/bin/bash
# Search for any occurrences of data.name in TSX/JSX to check for optional chaining or default handling
rg -A2 -B2 "data\.name" -g "*.tsx" -g "*.jsx"

Length of output: 7786

---

To confirm that data.name is always defined (e.g., after handling loading/error states), let’s inspect how data is fetched and guarded in src/app/settings/page.tsx.

---

🏁 Script executed:

#!/bin/bash
# Show the top of the settings page to verify loading/error handling around `data`
sed -n '1,200p' src/app/settings/page.tsx

Length of output: 1446

---

Safe to use data.name as-is

The <InlineAvatar> is only rendered inside a data ? (…) : <Skeleton /> check, so data (and by extension data.name) is guaranteed to be defined before it’s passed in. This matches the existing pattern across the codebase, where we rely on the loading/error guard around user data rather than per-property fallbacks. No additional nullish safeguard is needed here.

src/app/settings/profile/page.tsx (1)

17-17: Simplified user data access for avatar fallback

Directly using user.name[0] instead of getUsername(user)[0] is a good simplification that reduces unnecessary abstraction. However, this change assumes that user.name is always a non-empty string.

Consider adding a safeguard against potential empty strings or undefined values:

-{user.name[0]}
+{user.name?.[0] || '?'}

This would prevent rendering issues if the user's name is empty or undefined.

src/app/pipelines/RunsTab/columns.tsx (3)

140-141: Type-safe and consistent user data access.

This change correctly simplifies the accessor function for the author name, aligning with similar standardizations across the codebase.

---

144-145: Type safety improvement.

Changing name from a required string to an optional string | undefined more accurately reflects the possible values from the accessor function.

---

147-148: Proper null checking prevents component errors.

Adding a guard clause to check if name is falsy before rendering the InlineAvatar component prevents potential runtime errors.

src/app/runs/[id]/Header.tsx (2)

10-10: LGTM: Importing the new refresh component.

The import for the RunRefreshGroup component is correctly added.

---

46-49: Enhanced UI with run refresh controls.

Good improvement to the header UI by grouping the refresh controls with the actions menu in a flex container. This provides users with direct access to both manual and deep refresh functionality alongside existing actions.

The implementation correctly passes the runId parameter to the RunRefreshGroup component, ensuring it refreshes the specific run being viewed.

src/app/runs/[id]/_Tabs/Configuration/index.tsx (1)

14-17: Enhanced data fetching for environment details.

Adding the include_python_packages: true query parameter ensures the EnvironmentCollapsible component receives complete Python package information for rendering.

This change aligns with the enhancements made to display more detailed environment information in the pipeline run configuration tab.

src/components/artifacts/artifact-node-sheet/MetadataTab.tsx (2)

22-22: Improved empty state condition check.

The condition now properly checks both for the existence of data?.metadata?.run_metadata and whether it contains any keys, providing a more accurate determination of when to show the empty state.

---

26-29: Enhanced empty state messaging.

The updated empty state UI provides clearer information with a primary message and supporting text, improving the user experience when no metadata is available.

The styling with different text sizes and colors creates a good visual hierarchy between the main message and the supporting information.

src/app/stacks/columns.tsx (1)

53-57: LGTM! Code simplification improves readability.

The refactoring simplifies how user information is accessed by directly using the user's name string instead of the full user object and removing the dependency on the getUsername helper function. This aligns with similar simplifications made across the application.

src/components/stack-components/component-sheet/index.tsx (1)

2-35: Good refactoring to use standardized SheetHeader component.

Using the SheetHeader component improves consistency across the application and follows the pattern used in other sheet components. The SheetHeader already includes a close button (as seen in the relevant code snippets), and the expand button is now properly styled and positioned.

src/components/steps/step-sheet/SheetContent.tsx (1)

7-7: Great refactoring to use the shared SheetHeader component!

This change improves code reuse by replacing the custom close button implementation with the standardized SheetHeader component. This reduces duplication across sheet components and ensures consistent styling and accessibility features.

Also applies to: 53-53

src/app/components/columns.tsx (1)

88-92: Code simplification: Direct user name access for author display

The author column has been refactored to directly use the user's name string instead of using an intermediary helper function. This simplification aligns with similar changes across the application and removes unnecessary abstraction.

src/components/stacks/Sheet/update-stacks-dialog.tsx (1)

1-23: Well-structured component for stack updates

This new dialog component is cleanly implemented with:

• Proper typing and props definition
• Local state management for dialog open/close
• Appropriate component composition with Dialog and Button
• Good styling with responsive design considerations

The component follows the application's UI patterns and provides a clean interface for updating stacks.

src/app/runs/[id]/RunActionMenu.tsx (1)

23-33: Improved trigger button with proper styling and accessibility

The dropdown trigger has been enhanced by:

1. Using a proper Button component with appropriate styling
2. Adding screen reader text for better accessibility
3. Maintaining the same functionality with improved UI structure

This change aligns with best practices for accessible UI components and creates consistency with other action buttons in the application.

src/app/settings/secrets/columns.tsx (1)

55-60: Simplified author column implementation

The author column has been refactored to:

1. Directly access the user's name string through the accessor function
2. Pass that string directly to the InlineAvatar component
3. Remove dependency on a helper function

This change maintains the same functionality while simplifying the code, aligning with similar simplifications throughout the application.

src/components/CollapsibleCard.tsx (4)

19-20: Good addition of header customization props.

These new props enhance the component's flexibility by allowing custom styling and additional elements in the header section.

---

29-31: Appropriate default value for intent.

Adding a default value for intent ensures consistent rendering behavior when the prop is omitted.

---

36-36: Header className properly applied.

The headerClassName is now correctly applied to the CollapsibleHeader component.

---

45-46: Good placement of headerChildren.

Rendering the headerChildren after the CollapsibleTrigger ensures a logical layout where the title and chevron remain primary elements while allowing for additional content.

src/components/copy-metadata-button.tsx (1)

7-9: Well-defined props interface.

The component's props are clearly defined with proper types, extending ButtonProps while adding the required copyText property.

src/components/sheet/SheetHeader.tsx (4)

5-5: Good use of HTML attributes extension.

Extending from HTMLAttributes provides proper typing for all standard HTML div properties, improving component flexibility and type safety.

---

7-15: Well-refactored header component.

The component now:

• Properly spreads additional props to the div element
• Uses the cn utility for className composition
• Maintains a clean interface while enhancing flexibility

---

16-26: Improved close button implementation.

The refactored close button:

• Uses the Button component with asChild for better accessibility
• Has proper semantic markup with type="button"
• Includes screen reader text for accessibility
• Uses consistent styling with the design system

---

27-27: Good addition of children rendering.

Adding children rendering makes the component more reusable across different contexts.

src/components/runs/refresh-group/dropdown.tsx (4)

16-19: Good state management and hook usage.

The component correctly:

• Manages dropdown state with useState
• Uses the useDeepRefresh hook with proper callback
• Maintains clean separation of concerns

---

23-31: Well-designed dropdown trigger.

The dropdown trigger is:

• Properly structured with asChild
• Includes screen reader text for accessibility
• Has appropriate styling

---

43-48: Good descriptive text for deep refresh.

The dropdown item includes helpful descriptive text that explains the purpose and behavior of the deep refresh functionality, which improves the user experience.

---

34-42:

❓ Verification inconclusive

Check icon and className consistency.

The classes "size-5" used in lines 29 and 36 might be custom utility classes. Ensure these are defined in your CSS framework or consider using standard classes like "h-5 w-5" for consistency with other components.

---

🏁 Script executed:

#!/bin/bash
# Check for usage of 'size-5' class in the codebase
echo "Checking for size utility class usage..."
rg -i "size-\d+" --type=tsx --type=jsx --type=css
echo "Checking tailwind or CSS configuration for size utilities..."
fd -e js -e ts -e json "tailwind\.config|tailwind-config" | xargs cat

Length of output: 999

---

Verify custom “size-5” utility

I didn’t find any size-<n> utilities in your Tailwind config. Unless your zenmlPreset provides a size-5 class, you should replace:

- className="size-5 shrink-0"
+ className="h-5 w-5 shrink-0"

to stay consistent with standard Tailwind sizing.

• File: src/components/runs/refresh-group/dropdown.tsx
• Lines: 29 & 36

src/components/stacks/Sheet/index.tsx (2)

26-26: Well-structured import addition

The import for UpdateStackDialog is properly added to support the new stack update feature.

---

64-82: Good UI enhancement with Update Stack feature

The layout changes effectively incorporate the new update stack functionality while maintaining the original structure. The flex container with justify-between provides clean separation between the stack information and the action button.

The implementation correctly uses the stack name from the API response and passes it to the UpdateStackDialog component, ensuring proper integration with the rest of the stack management functionality.

src/data/pipeline-runs/pipeline-run-detail-query.ts (4)

4-8: Clean import organization for query parameter handling

The imports are properly updated to support the new query parameter functionality, including PipelineRunDetailQueryParams type and the objectToSearchParams utility.

---

11-11: Well-defined type extension

Good addition of optional query parameters to the PipelineRunDetailOverview type, maintaining backward compatibility while enabling enhanced querying capabilities.

---

14-19: Clean query key implementation

The function properly incorporates query parameters into the query key, ensuring proper cache management when parameters change.

---

21-23: Robust URL construction with query parameters

The implementation correctly handles query parameter conversion and URL construction, including the edge case when no parameters are provided.

src/components/stack-components/component-detail/Header.tsx (3)

1-7: Clean import updates for UI simplification

The imports are properly updated to support the new button-based edit functionality, including UpdateButtonContent and React Router's useLocation.

---

20-22: Improved navigation awareness

Good use of useLocation to determine the current path segment and conditionally render the edit button only when not already on the edit page.

Also applies to: 32-32

---

128-136: Clean implementation of edit button

The new ComponentEditButton is well-implemented, using declarative routing with Link instead of imperative navigation, and properly integrating the new UpdateButtonContent component for consistent UI.

src/components/stack-components/component-detail/ConfigTab.tsx (4)

1-17: Well-organized imports

The imports are properly updated to include the new ConnectorTag component and reorganize related imports.

---

36-45: Improved variable naming and data access patterns

Excellent renaming of component to componentQuery to clarify its nature as a query result, with proper destructuring of data properties for cleaner access throughout the component.

---

70-70: Cleaner data access in JSX

The component now accesses data properties directly from the destructured variables, leading to more readable and maintainable code.

Also applies to: 83-87

---

92-97: Enhanced UI with proper conditional rendering

The "Author" field now properly handles the case when user information is not available, and the new "Service Connector" field with ConnectorTag enhances the component configuration display with valuable information.

src/components/NestedCollapsible.tsx (8)

14-15: Good addition of component imports

Adding the NotAvailable and CopyMetadataButton components improves the code organization and reusability.

---

17-17: Well-structured regex extraction

Moving the regex pattern for class detection to a module-level constant improves maintainability and performance.

---

54-55: Good readability improvement

Creating a dedicated hasNoData flag improves code readability and avoids duplicate checks.

---

63-64: Enhanced UI with copy functionality

The addition of the copy button in the header provides valuable functionality for users working with metadata, and the flex layout properly aligns the items.

---

67-67: Improved empty state handling

Replacing the empty message with the standardized NotAvailable component creates a more consistent user experience across the application.

---

82-82: Good refactoring of value rendering

Using the newly created RenderSimpleValue component reduces duplication and ensures consistent rendering of values.

---

107-122: Improved array rendering with consistent styling

The updates to RenderArray enhance user experience by adding a copy button and ensuring consistent styling with the main component. The use of RenderSimpleValue also reduces code duplication.

---

142-165: Well-structured value rendering component

The RenderSimpleValue component is a good abstraction that handles different value types appropriately:

1. Class representation strings as code snippets
2. Null values with clear representation
3. URLs as clickable links
4. Other values as either strings or formatted JSON

This reduces code duplication and ensures consistent rendering.

src/app/runs/[id]/_Tabs/Configuration/EnvironmentCollapsible.tsx (5)

8-13: Good addition of tooltip components

Adding tooltip-related imports allows for enhanced user context and information.

---

20-20: Good constant declaration

Defining a constant for the Python packages key improves code maintainability.

---

25-29: Improved variable naming and data normalization

Renaming variables for better clarity and adding normalization for Python packages ensures consistent data structure before rendering.

---

47-66: Enhanced user experience with informative tooltips

Adding descriptive tooltips with documentation links for the Client Environment provides valuable context to users.

---

99-108: Well-implemented data normalization function

The normalizePythonPackages function effectively handles the conversion of newline-separated strings to arrays, ensuring consistent data structure regardless of the original format.

src/app/runs/[id]/_Tabs/Configuration/ParameterCollapsible.tsx (2)

3-3: Good import addition for the new component.

The NotAvailable component import is correctly added to support the UI enhancement.

---

41-41: Improved UI consistency by using the NotAvailable component.

Replacing the hardcoded text with the standardized NotAvailable component improves UI consistency across the application. This change aligns with the broader effort to standardize empty state representations.