Observer Timeline UI Updates

[wintonzheng]

Important

Enhance Observer Timeline UI with new components, improved workflow run handling, and updated type definitions in the Skyvern frontend.

• UI Enhancements:
  • Add BrainIcon component for ThoughtCard.
  • Update SwitchBarNavigation to include search parameters in links.
  • Introduce WorkflowRunTimeline component for displaying workflow run timeline.
• Workflow Run Logic:
  • Implement useActiveWorkflowRunItem hook for managing active workflow run items.
  • Add findActiveItem and findBlockSurroundingAction in workflowTimelineUtils.ts.
• Component Updates:
  • Modify WorkflowRun to integrate WorkflowRunTimeline and handle active item selection.
  • Update WorkflowRunOverview, WorkflowRunOutput, and WorkflowPostRunParameters for active item logic.
  • Enhance ActionCard and ThoughtCard with improved styling and interaction.
• Type Definitions:
  • Extend WorkflowRunBlock and WorkflowRunTimelineItem types in workflowRunTypes.ts.

^{This description was created by for 2cb44a2. It will automatically update as commits are pushed.}

[ellipsis-dev]

👍 Looks good to me! Incremental review on 2cb44a2 in 37 seconds

More details

• Looked at 1553 lines of code in 17 files
• Skipped 0 files when reviewing.
• Skipped posting 3 drafted comments based on config settings.

1. skyvern-frontend/src/routes/workflows/workflowRun/useActiveWorkflowRunItem.ts:26

• Draft comment:
  Consider adding a check to ensure id is not null or undefined before setting it in handleSetActiveItem. This will prevent potential issues with invalid search parameters.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The code in useActiveWorkflowRunItem.ts is responsible for managing the active workflow run item using URL search parameters. The function handleSetActiveItem is used to update the search parameters, but it does not check if the id is null or undefined before setting it. This could lead to unexpected behavior if id is null or undefined.

2. skyvern-frontend/src/routes/workflows/workflowRun/workflowTimelineUtils.ts:90

• Draft comment:
  Consider adding a default return value or error handling in findActiveItem for cases where the target is not found in the timeline. This will prevent potential issues with undefined return values.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The findActiveItem function in workflowTimelineUtils.ts is responsible for finding the active item in the workflow timeline. However, it does not handle the case where the target is not found in the timeline, which could lead to unexpected behavior.

3. skyvern-frontend/src/routes/workflows/WorkflowRun.tsx:122

• Draft comment:
  Consider adding a check to ensure id is not null or undefined before setting it in handleSetActiveItem. This will prevent potential issues with invalid search parameters.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In WorkflowRun.tsx, the handleSetActiveItem function is used to update the search parameters. However, it does not check if the id is null or undefined before setting it, which could lead to unexpected behavior if id is null or undefined.

Workflow ID: wflow_Q8fn4eKlIlE8wA4v

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 2cb44a2 in 1 minute and 46 seconds

More details

• Looked at 1553 lines of code in 17 files
• Skipped 0 files when reviewing.
• Skipped posting 5 drafted comments based on config settings.

1. skyvern-frontend/src/routes/workflows/workflowRun/workflowTimelineUtils.ts:41

• Draft comment:
  The non-null assertion operator ! on timeline is unnecessary since timeline is already of type Array<WorkflowRunTimelineItem>. Consider removing it for clarity.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The code in findActiveItem function is using a non-null assertion operator ! on timeline which is unnecessary since the type of timeline is already Array<WorkflowRunTimelineItem>. This can be removed to improve code clarity.

2. skyvern-frontend/src/routes/workflows/workflowRun/workflowTimelineUtils.ts:28

• Draft comment:
  Consider adding an explicit return undefined; at the end of the findBlockSurroundingAction function to make it clear that undefined is returned when no block is found.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The findBlockSurroundingAction function does not explicitly return undefined when no block is found. Adding an explicit return statement for undefined can improve code clarity.

3. skyvern-frontend/src/routes/workflows/workflowRun/useActiveWorkflowRunItem.ts:27

• Draft comment:
  You can simplify the handleSetActiveItem function by directly using setSearchParams({ active: id }, { replace: true }); instead of using searchParams.set and then setSearchParams.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The useActiveWorkflowRunItem hook is using searchParams.set and setSearchParams to update the search parameters. This can be simplified by directly using setSearchParams with an object.

4. skyvern-frontend/src/routes/workflows/WorkflowRun.tsx:123

• Draft comment:
  You can simplify the handleSetActiveItem function by directly using setSearchParams({ active: id }, { replace: true }); instead of using searchParams.set and then setSearchParams.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The useActiveWorkflowRunItem hook is using searchParams.set and setSearchParams to update the search parameters. This can be simplified by directly using setSearchParams with an object.

5. skyvern-frontend/src/routes/workflows/workflowRun/WorkflowRunTimeline.tsx:93

• Draft comment:
  You can simplify the onClick handler by directly using setSearchParams({ active: 'stream' }, { replace: true }); instead of using searchParams.set and then setSearchParams.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The useActiveWorkflowRunItem hook is using searchParams.set and setSearchParams to update the search parameters. This can be simplified by directly using setSearchParams with an object.

Workflow ID: wflow_yF7IDXDui1b3nPEt

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.