fix: improve GraphMetrics header with collapse button

- Removed unnecessary refresh button (metrics auto-update via useMemo)
- Added collapse button to header (Ctrl+I)
- Matches behavior of Actor/Relation property panels
- Cleaner, more consistent UX

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Common/GraphMetrics.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import WarningIcon from '@mui/icons-material/Warning';
 import InfoIcon from '@mui/icons-material/Info';
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -11,6 +11,7 @@ interface GraphMetricsProps {
   nodes: Actor[];
   edges: Relation[];
   onActorClick?: (actorId: string) => void;
+  onCollapse?: () => void;
 }
 
 /**
@@ -19,18 +20,12 @@ interface GraphMetricsProps {
  * Shows when no node or edge is selected in the right panel.
  * Provides insights into graph structure, connectivity, and key actors.
  */
-const GraphMetrics = ({ nodes, edges, onActorClick }: GraphMetricsProps) => {
+const GraphMetrics = ({ nodes, edges, onActorClick, onCollapse }: GraphMetricsProps) => {
-  // Calculate all metrics (memoized for performance)
+  // Calculate all metrics (memoized for performance - auto-updates when nodes/edges change)
   const metrics = useMemo(() => {
     return calculateGraphMetrics(nodes, edges);
   }, [nodes, edges]);
 
-  const handleRefresh = () => {
-    // Metrics are automatically recalculated via useMemo
-    // This is just for visual feedback
-    console.log('Metrics refreshed');
-  };
-
   const formatNumber = (num: number, decimals: number = 2): string => {
     return num.toFixed(decimals);
   };
@@ -47,11 +42,13 @@ const GraphMetrics = ({ nodes, edges, onActorClick }: GraphMetricsProps) => {
           <BarChartIcon className="text-blue-600" fontSize="small" />
           <h2 className="text-sm font-semibold text-gray-700">Graph Analysis</h2>
         </div>
-        <Tooltip title="Refresh Metrics">
+        {onCollapse && (
-          <IconButton size="small" onClick={handleRefresh}>
+          <Tooltip title="Collapse Panel (Ctrl+I)">
-            <RefreshIcon fontSize="small" />
+            <IconButton size="small" onClick={onCollapse}>
-          </IconButton>
+              <ChevronRightIcon fontSize="small" />
-        </Tooltip>
+            </IconButton>
+          </Tooltip>
+        )}
       </div>
 
       {/* Scrollable Content */}

src/components/Panels/RightPanel.tsx

@@ -181,7 +181,7 @@ const RightPanel = ({ selectedNode, selectedEdge, onClose }: Props) => {
         className="h-full bg-white border-l border-gray-200 flex flex-col"
         style={{ width: `${rightPanelWidth}px` }}
       >
-        <GraphMetrics nodes={nodes} edges={edges} />
+        <GraphMetrics nodes={nodes} edges={edges} onCollapse={collapseRightPanel} />
         {ConfirmDialogComponent}
       </div>
     );