Update Dashboard to display Plan from events

[kleneway]

Update Dashboard to Display Plan from Events

Description

The current Dashboard has a "Plan" tab in the workspace that displays an array of plan steps to the user. Currently, the dashboard uses a hardcoded set of plan steps. We recently added Plan and PlanStep events that are emitted when the Planning agent creates a new plan. We need to update the dashboard to use these new events from the database and/or live websockets instead of the hardcoded plan steps. Additionally, there is a footer in the main Workspace index page that shows the current plan step. For now, we don't have a concept of the "current plan step," so just set the current plan step to the first step in the plan (if it exists).

Files to Update:

• src/app/dashboard/[org]/[repo]/[developer]/Dashboard.tsx
• src/app/dashboard/[org]/[repo]/[developer]/components/workspace/Plan.tsx
• src/app/dashboard/[org]/[repo]/[developer]/components/workspace/index.tsx

Requirements:

1. Fetch Plan and PlanStep Events:

   • Update the Dashboard.tsx to fetch Plan and PlanStep events from the database and/or live websockets.
   • Use the existing patterns for fetching and displaying other event data in the workspace tabs.

2. Display Plan Steps:

   • Update the Plan.tsx component to display the plan steps received from the events.
   • Ensure the plan steps are displayed in the correct order.

3. Set Current Plan Step:

   • Update the footer in index.tsx to display the current plan step.
   • For now, set the current plan step to the first step in the plan (if it exists).

Acceptance Criteria:

• [ ] The Dashboard.tsx fetches Plan and PlanStep events from the database and/or live websockets.
• [ ] The Plan.tsx component displays the plan steps received from the events.
• [ ] The footer in index.tsx displays the current plan step, set to the first step in the plan if it exists.
• [ ] The implementation follows the existing patterns for fetching and displaying event data in the workspace tabs.
• [ ] The codebase uses TypeScript and follows the React functional component pattern.
• [ ] The project uses Tailwind CSS for styling.

Edge Cases:

• Handle cases where there are no plan steps available.
• Ensure the UI gracefully handles any errors in fetching the events.

@jacob-ai-bot

Steps to Address Issue: 1. Update Dashboard.tsx to fetch Plan and PlanStep events

2. Modify Plan.tsx to display fetched plan steps
3. Update index.tsx to show current plan step in footer
4. Implement error handling for cases with no plan steps
5. Ensure all components use TypeScript and follow React functional component patterns
6. Apply Tailwind CSS for styling consistency

Files to Update: src/app/dashboard/[org]/[repo]/[developer]/Dashboard.tsx, src/app/dashboard/[org]/[repo]/[developer]/components/workspace/Plan.tsx, src/app/dashboard/[org]/[repo]/[developer]/components/workspace/index.tsx

task assigned to: @jacob-ai-bot

[jacob-local-kevin[bot]]

JACoB here...

You mentioned me on this issue and I am busy taking a look at it.

I'll continue to comment on this issue with status as I make progress.

[jacob-local-kevin[bot]]

JACoB here...

You mentioned me on this issue and I am busy taking a look at it.

I'll continue to comment on this issue with status as I make progress.

[jacob-local-kevin[bot]]

JACoB here...

You mentioned me on this issue and I am busy taking a look at it.

I'll continue to comment on this issue with status as I make progress.

[jacob-local-kevin[bot]]

Update

I've completed my initial work on this issue and have created a pull request: JACoB PR for Issue Update Dashboard to display Plan from events.

The changes currently result in an error, so I'll be making some additional changes before it is ready to merge.