[QOL Feature] Informational Tooltips for Status Panel sections

[VooDisss]

Description

The right sidebar (Status Panel) currently displays several technical accordion sections (Plan, Background Shells, MCP Servers, LSP Servers, Plugins) without any inline explanation of their function. New users or those unfamiliar with the system's architecture may find these terms ambiguous.

We should add an "Information" (i) icon next to each section title that reveals a descriptive tooltip on hover, explaining the technical role of each module.

Proposed Solution

Enhance the section headers in the Status Panel with interactive tooltips.

1. UI Enhancements

• Target File: packages/ui/src/components/instance/instance-shell2.tsx
• Location: Inside the Accordion.Trigger for each section in RightDrawerContent.
• Icon: Add a small info icon (e.g., InfoOutlinedIcon from SUID or an Info icon from Lucide).
• Tooltip Component: Use a Tooltip wrapper (e.g., from @suid/material or @kobalte/core).

2. Guidance for Technical Tooltips

The tooltips should provide a technical elaboration for each section. Below are the key questions the developer should aim to answer for each module:

• PLAN: What is this roadmap? How is it generated by the agent? What kind of tasks does it track?
• BACKGROUND SHELLS: What are these processes? How do they relate to the current workspace? What can the user do with them (monitoring vs. termination)?
• MCP SERVERS: What is the Model Context Protocol? How does it extend the agent's capabilities? Where do these tools originate?
• LSP SERVERS: What is the Language Server Protocol? How does it provide code intelligence? Why might multiple servers be active?
• PLUGINS: What is the role of these plugins? How do they differ from MCP or LSP modules? What parts of the UI/Server do they typically modify?

Technical Analysis

• Reactivity: The tooltips should be static text but integrated into the existing Accordion mapping logic.
• Accessibility: Ensure the info icon is aria-labeled and the tooltip is keyboard-accessible.
• Styling: The icon should be muted (e.g., opacity-50) and only brighten on hover, ensuring it doesn't clutter the UI unnecessarily.

User Experience Goal

Provide instant, low-friction technical context for the various system modules, empowering users to understand how the agent is interacting with their environment.