agent-ecosystem/src/renderer/components/layout/PaneContent.tsx
iliya d3f19834ff feat: enhance extension installation and uninstallation flows
- Refactored plugin and MCP server installation/uninstallation handlers to use async/await for improved readability and error handling.
- Added cache invalidation logic upon successful installation of plugins and MCP servers to ensure up-to-date state.
- Introduced error message handling for installation failures, providing users with clearer feedback on issues encountered during the process.
- Updated UI components to display error messages related to installation and uninstallation, enhancing user experience.
- Implemented sanitization for MCP server names to ensure compliance with CLI requirements.
2026-03-08 01:44:58 +02:00

73 lines
2.5 KiB
TypeScript

/**
* PaneContent - Renders tab content for a single pane.
* Uses CSS display-toggle to keep all tabs mounted (preserving state).
*/
import { TabUIProvider } from '@renderer/contexts/TabUIContext';
import { DashboardView } from '../dashboard/DashboardView';
import { ExtensionStoreView } from '../extensions/ExtensionStoreView';
import { NotificationsView } from '../notifications/NotificationsView';
import { SessionReportTab } from '../report/SessionReportTab';
import { SchedulesView } from '../schedules/SchedulesView';
import { SettingsView } from '../settings/SettingsView';
import { TeamDetailView } from '../team/TeamDetailView';
import { TeamListView } from '../team/TeamListView';
import { SessionTabContent } from './SessionTabContent';
import type { Pane } from '@renderer/types/panes';
interface PaneContentProps {
pane: Pane;
}
export const PaneContent = ({ pane }: PaneContentProps): React.JSX.Element => {
const activeTabId = pane.activeTabId;
// Show default dashboard if no tabs are open in this pane
const showDefaultDashboard = !activeTabId && pane.tabs.length === 0;
return (
<div className="relative flex flex-1 overflow-hidden">
{showDefaultDashboard && (
<div className="absolute inset-0 flex">
<DashboardView />
</div>
)}
{pane.tabs.map((tab) => {
const isActive = tab.id === activeTabId;
return (
<div
key={tab.id}
className="absolute inset-0 flex"
style={{ display: isActive ? 'flex' : 'none' }}
>
{tab.type === 'dashboard' && <DashboardView />}
{tab.type === 'notifications' && <NotificationsView />}
{tab.type === 'settings' && <SettingsView />}
{tab.type === 'teams' && <TeamListView />}
{tab.type === 'team' && (
<TabUIProvider tabId={tab.id}>
<TeamDetailView teamName={tab.teamName ?? ''} />
</TabUIProvider>
)}
{tab.type === 'session' && (
<TabUIProvider tabId={tab.id}>
<SessionTabContent tab={tab} isActive={isActive} />
</TabUIProvider>
)}
{tab.type === 'report' && <SessionReportTab tab={tab} />}
{tab.type === 'extensions' && (
<TabUIProvider tabId={tab.id}>
<ExtensionStoreView />
</TabUIProvider>
)}
{tab.type === 'schedules' && <SchedulesView />}
</div>
);
})}
</div>
);
};