524a62438e
- Updated the README to reflect new features in Claude Code, including the ability to spawn subagents via the Task tool and coordinate teams with improved visibility. - Added details on the rendering of subagent sessions as expandable inline cards, including execution traces, metrics, and tool calls. - Enhanced description of teammate messages, highlighting color-coded cards and team lifecycle visibility. - Clarified session summary metrics to differentiate between teammate and subagent counts for better user insights. This commit significantly improves the documentation of team and subagent visualization features, providing users with a clearer understanding of the capabilities and enhancements in the application.
53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
/**
|
|
* ConnectionStatusBadge - Visual indicator for workspace connection status.
|
|
*
|
|
* Renders appropriate icon based on connection state:
|
|
* - Local: Monitor icon (muted)
|
|
* - SSH connected: Wifi icon (green)
|
|
* - SSH connecting: Animated spinner (muted)
|
|
* - SSH disconnected: WifiOff icon (muted)
|
|
* - SSH error: WifiOff icon (red)
|
|
*/
|
|
|
|
import { useStore } from '@renderer/store';
|
|
import { Loader2, Monitor, Wifi, WifiOff } from 'lucide-react';
|
|
|
|
interface ConnectionStatusBadgeProps {
|
|
contextId: string;
|
|
className?: string;
|
|
}
|
|
|
|
export const ConnectionStatusBadge = ({
|
|
contextId,
|
|
className,
|
|
}: Readonly<ConnectionStatusBadgeProps>): React.JSX.Element => {
|
|
const { connectionState, connectedHost } = useStore((s) => ({
|
|
connectionState: s.connectionState,
|
|
connectedHost: s.connectedHost,
|
|
}));
|
|
|
|
// Local context always shows Monitor icon
|
|
if (contextId === 'local') {
|
|
return <Monitor className={`size-3.5 text-text-muted ${className ?? ''}`} />;
|
|
}
|
|
|
|
// SSH context - determine if this specific SSH context matches connected host
|
|
const isConnectedToThisHost = connectedHost != null && contextId === `ssh-${connectedHost}`;
|
|
|
|
// If this SSH context doesn't match the connected host, treat as disconnected
|
|
const effectiveState = isConnectedToThisHost ? connectionState : 'disconnected';
|
|
|
|
// Render icon based on connection state
|
|
switch (effectiveState) {
|
|
case 'connected':
|
|
return <Wifi className={`size-3.5 text-green-400 ${className ?? ''}`} />;
|
|
case 'connecting':
|
|
return <Loader2 className={`size-3.5 animate-spin text-text-muted ${className ?? ''}`} />;
|
|
case 'disconnected':
|
|
return <WifiOff className={`size-3.5 text-text-muted ${className ?? ''}`} />;
|
|
case 'error':
|
|
return <WifiOff className={`size-3.5 text-red-400 ${className ?? ''}`} />;
|
|
default:
|
|
return <WifiOff className={`size-3.5 text-text-muted ${className ?? ''}`} />;
|
|
}
|
|
};
|