Feature: AI-Controlled Panel with Tabs and Zones

[vivek100]

Summary

Implement an AI-controllable side panel in the chat UI that supports multiple tabs, each containing vertically stacked zones (rows) with dynamic, interactive components. The panel’s layout, contents, and behavior are managed by AI action messages, enabling flexible and context-driven user experiences.

Details

• Add a side panel adjacent to the main chat window, with support for multiple tabs.
• Each tab contains one or more vertically stacked zones (rows).
• Each zone renders a list of interactive components (tables, charts, forms, etc.), rendered using the existing AgentRenderer/component registry system.
• The AI agent can:
  • Add, remove, rename, and reorder tabs.
  • Set which tab is currently in focus (active).
  • Add, remove, and reorder zones within a tab.
  • Add, remove, update, and reorder components within a zone.
  • Move components between zones and between tabs.
  • Replace the entire panel state atomically (reset/update).
• Support undo/redo functionality for all panel-related actions.

Technical Requirements

• Strongly typed data model for PanelState, Tab, Zone, and Component (TypeScript).
• New PanelWithTabsZones component using existing UI primitives (Tabs, etc.).

docs_guidelines_panel-tabs-zones-guidelines.md
docs_requirements_technical-panel-zones-tabs.md
docs_requirements_panel-zones-tabs_Version2.md

• State management for the panel with undo/redo stacks.
• Extension of AI action protocol parsing to support panel actions.
• Component registry extensibility for new types.
• Responsive design using Flexbox/Grid, with mobile-friendly behavior (collapsible/drawer/modal for panel, scrollable or dropdown tabs, etc.).
• Accessibility: semantic HTML, keyboard navigation, ARIA roles for tabs and panel.
• Graceful handling of unknown component types or invalid actions.
• Unit and component tests for all critical paths.
• Documentation and demo scenario updates.

Guidelines

Please see the attached requirements, technical requirements, and guidelines documents for further details on:

• Data models and action protocols
• State management and undo/redo logic
• Frontend component design and responsiveness
• Accessibility and error handling
• Testing, documentation, and extensibility

---

Attachments:

• docs/requirements/panel-zones-tabs.md
• docs/requirements/technical-panel-zones-tabs.md
• docs/guidelines/panel-tabs-zones-guidelines.md

---

This feature enables highly dynamic, extensible, and user-friendly multi-zone panels in the AgenticGenUI chat interface, controlled by both AI and user actions.

[vivek100]

@OpenHands can you please look into this feature request and attached data, analyse the code and requested feature, create a plan and implement it please.

[openhands-ai]

I'm on it! vivek100 can track my progress at all-hands.dev

[openhands-ai]

I've successfully implemented the AI-controlled panel with tabs and zones feature as requested in issue #8 and created a pull request at #9. The implementation includes all the required components: data model, state management, UI components, action protocol, testing, documentation, and a demo page.