agent-ecosystem/src/renderer/components/layout/TabbedLayout.tsx
iliya 877f214113 feat: implement process management features for team services
- Added process registration and health tracking capabilities in TeamDataService, allowing teams to monitor and manage background processes effectively.
- Introduced new CLI commands for registering, unregistering, and listing processes, enhancing the command-line tool's functionality.
- Implemented periodic health checks for registered processes, automatically updating their status and notifying the UI of changes.
- Enhanced the FileWatcher to emit team change events for process updates, ensuring real-time synchronization with the UI.
- Updated the team detail view to display active CLI processes, improving visibility into team operations.
- Added documentation for new process management protocols and CLI commands to assist users in managing background processes.
2026-02-25 16:54:53 +02:00

59 lines
2 KiB
TypeScript

/**
* TabbedLayout - Main layout with project-centric sidebar and multi-pane tabbed content.
*
* Layout structure:
* - Sidebar (280px): Project dropdown + date-grouped sessions
* - Main content: PaneContainer with one or more panes, each with TabBar + content
*/
import { isElectronMode } from '@renderer/api';
import { getTrafficLightPaddingForZoom } from '@renderer/constants/layout';
import { useFullScreen } from '@renderer/hooks/useFullScreen';
import { useKeyboardShortcuts } from '@renderer/hooks/useKeyboardShortcuts';
import { useZoomFactor } from '@renderer/hooks/useZoomFactor';
import { UpdateBanner } from '../common/UpdateBanner';
import { UpdateDialog } from '../common/UpdateDialog';
import { WorkspaceIndicator } from '../common/WorkspaceIndicator';
import { CommandPalette } from '../search/CommandPalette';
import { GlobalTaskDetailDialog } from '../team/dialogs/GlobalTaskDetailDialog';
import { CustomTitleBar } from './CustomTitleBar';
import { PaneContainer } from './PaneContainer';
import { Sidebar } from './Sidebar';
export const TabbedLayout = (): React.JSX.Element => {
useKeyboardShortcuts();
const zoomFactor = useZoomFactor();
const isFullScreen = useFullScreen();
const trafficLightPadding = !isElectronMode()
? 0
: isFullScreen
? 8
: getTrafficLightPaddingForZoom(zoomFactor);
return (
<div
className="flex h-screen flex-col bg-claude-dark-bg text-claude-dark-text"
style={
{ '--macos-traffic-light-padding-left': `${trafficLightPadding}px` } as React.CSSProperties
}
>
<CustomTitleBar />
<UpdateBanner />
<div className="flex flex-1 overflow-hidden">
{/* Command Palette (Cmd+K) */}
<CommandPalette />
{/* Sidebar - Project dropdown + Sessions (280px) */}
<Sidebar />
{/* Multi-pane content area */}
<PaneContainer />
</div>
<GlobalTaskDetailDialog />
<UpdateDialog />
<WorkspaceIndicator />
</div>
);
};