Add observer in UI

[wintonzheng]

…194)" (#3196)"

This reverts commit a466afc103497c95a3aeaef120bb36bc4648baa0.

---

Important

Reintroduces observer feature in PromptBox with new ObserverCruise type and UI components, controlled by observerFeatureEnabled in env.ts.

• Behavior:
  • Reintroduces observer feature in PromptBox.tsx, allowing selection between 'Observer' and 'Task' modes.
  • Adds startObserverCruiseMutation to handle observer mode, posting to /cruise endpoint.
  • Uses observerFeatureEnabled from env.ts to toggle observer feature.
• Types:
  • Adds ObserverCruise type in types.ts for observer-related API responses.
• UI Components:
  • Adds CustomSelectItem and SelectItemText to select.tsx for custom select UI.
• Environment:
  • Adds observerFeatureEnabled in env.ts to control observer feature toggle.

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on 21a61d4 in 19 seconds

More details

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

1. skyvern-frontend/src/util/env.ts:23

• Draft comment:
  The conversion of observerEnabled to a boolean is correct, but ensure VITE_OBSERVER_ENABLED is always set to "true" or "false" to avoid unexpected behavior.
• Reason this comment was not posted:
  Confidence changes required: 33%
  The observerFeatureEnabled is being set based on the VITE_OBSERVER_ENABLED environment variable, which is a string. This is correctly converted to a boolean, so no issues here.

2. skyvern-frontend/src/components/ui/select.tsx:117

• Draft comment:
  CustomSelectItem and SelectItem have similar implementations. Consider refactoring to reduce code duplication.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The CustomSelectItem and SelectItem components have similar implementations. Consider reusing code to avoid duplication.

3. skyvern-frontend/src/routes/tasks/create/PromptBox.tsx:132

• Draft comment:
  Consider extracting getClient(credentialGetter) to a common function to avoid repetition in mutations.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The startObserverCruiseMutation and getTaskFromPromptMutation both use getClient(credentialGetter). This could be extracted to a common function to avoid repetition.

Workflow ID: wflow_yDcYS3DGyUpqSium

---

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

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to 21a61d4 in 1 minute and 15 seconds

More details

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

1. skyvern-frontend/src/util/env.ts:23

• Draft comment:
  The conversion of observerEnabled to a boolean is correct, but ensure that VITE_OBSERVER_ENABLED is always set to either "true" or "false" to avoid unexpected behavior.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The observerFeatureEnabled is being set based on the VITE_OBSERVER_ENABLED environment variable, which is a string. This is correctly converted to a boolean, so no issues here.

2. skyvern-frontend/src/components/ui/select.tsx:117

• Draft comment:
  CustomSelectItem and SelectItem have similar implementations. Consider reusing one to avoid redundancy.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The CustomSelectItem and SelectItem components have similar implementations. Consider reusing one of them to avoid redundancy.

3. skyvern-frontend/src/routes/tasks/create/PromptBox.tsx:164

• Draft comment:
  Ensure error messages are user-friendly and provide actionable feedback.
• Reason this comment was not posted:
  Confidence changes required: 33%
  The startObserverCruiseMutation and getTaskFromPromptMutation both handle errors by displaying a toast with the error message. This is a good practice for user feedback.

Workflow ID: wflow_WlqROG18AcdXCpBd

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

This is a duplicate of the existing SelectItem component. The existing component is preferred as it properly wraps children in SelectPrimitive.ItemText.

• component SelectItem (select.tsx)