refactor(ui): decompose MonitorView into maintainable modules

ui/src/components/monitor/ConnectionStatus.tsx

@@ -0,0 +1,18 @@
+// SPDX-FileCopyrightText: © 2025 StreamKit Contributors
+//
+// SPDX-License-Identifier: MPL-2.0
+
+import React from 'react';
+
+import {
+  ConnectionStatusContainer,
+  ConnectionStatusDot,
+} from '@/components/monitor/MonitorView.styles';
+
+// Memoized ConnectionStatus component
+export const ConnectionStatus = React.memo(({ connected }: { connected: boolean }) => (
+  <ConnectionStatusContainer connected={connected}>
+    <ConnectionStatusDot connected={connected} />
+    {connected ? 'Connected' : 'Disconnected'}
+  </ConnectionStatusContainer>
+));

ui/src/components/monitor/LeftPanel.tsx

@@ -0,0 +1,165 @@
+// SPDX-FileCopyrightText: © 2025 StreamKit Contributors
+//
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * Left sidebar panel for the Monitor View.
+ *
+ * Contains the session list (with search) and, in staging mode,
+ * a "Nodes Library" tab for drag-and-drop node insertion.
+ */
+
+import React, { useState, useEffect } from 'react';
+
+import {
+  LeftPanelAside,
+  SessionsContainer,
+  SessionSearchInput,
+  SearchWrapper,
+  SessionListWrapper,
+  LoadingText,
+  SessionList,
+  EmptyStateText,
+  NodesLibraryContainer,
+} from '@/components/monitor/MonitorView.styles';
+import { SessionItem } from '@/components/monitor/SessionItem';
+import NodePalette from '@/components/NodePalette';
+import { TabsContent, TabsList, TabsRoot, TabsTrigger } from '@/components/ui/Tabs';
+import type { NodeDefinition } from '@/types/types';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface LeftPanelProps {
+  isLoadingSessions: boolean;
+  sessions: { id: string; name: string | null; created_at: string }[];
+  selectedSessionId: string | null;
+  onSessionClick: (id: string) => void;
+  onSessionDelete: (id: string) => void;
+  editMode: boolean;
+  nodeDefinitions: NodeDefinition[];
+  onDragStart: (event: React.DragEvent, nodeType: string) => void;
+  pluginKinds: Set<string>;
+  pluginTypes: Map<string, 'wasm' | 'native'>;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export const LeftPanel = React.memo(
+  ({
+    isLoadingSessions,
+    sessions,
+    selectedSessionId,
+    onSessionClick,
+    onSessionDelete,
+    editMode,
+    nodeDefinitions,
+    onDragStart,
+    pluginKinds,
+    pluginTypes,
+  }: LeftPanelProps) => {
+    const [activeTab, setActiveTab] = useState<'sessions' | 'add'>('sessions');
+    const [searchQuery, setSearchQuery] = useState('');
+
+    useEffect(() => {
+      if (!editMode && activeTab === 'add') {
+        setActiveTab('sessions');
+      }
+    }, [editMode, activeTab]);
+
+    const filteredSessions = React.useMemo(() => {
+      if (!searchQuery.trim()) {
+        return sessions;
+      }
+      const query = searchQuery.toLowerCase();
+      return sessions.filter(
+        (session) =>
+          session.id.toLowerCase().includes(query) ||
+          (session.name && session.name.toLowerCase().includes(query))
+      );
+    }, [sessions, searchQuery]);
+
+    return (
+      <LeftPanelAside>
+        <TabsRoot
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as 'sessions' | 'add')}
+        >
+          <TabsList>
+            <TabsTrigger value="sessions">Sessions</TabsTrigger>
+            {editMode && (
+              <TabsTrigger value="add" disabled={!selectedSessionId}>
+                Nodes Library
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          <TabsContent value="sessions">
+            <SessionsContainer data-testid="sessions-list">
+              {isLoadingSessions ? (
+                <LoadingText>Loading sessions...</LoadingText>
+              ) : sessions.length === 0 ? (
+                <EmptyStateText>No active sessions</EmptyStateText>
+              ) : (
+                <>
+                  {sessions.length >= 5 && (
+                    <SearchWrapper>
+                      <SessionSearchInput
+                        type="text"
+                        placeholder="Search sessions..."
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                      />
+                    </SearchWrapper>
+                  )}
+                  <SessionListWrapper>
+                    {filteredSessions.length === 0 ? (
+                      <EmptyStateText>No matching sessions</EmptyStateText>
+                    ) : (
+                      <SessionList>
+                        {filteredSessions.map((session) => (
+                          <li key={session.id}>
+                            <SessionItem
+                              session={session}
+                              isActive={selectedSessionId === session.id}
+                              onClick={onSessionClick}
+                              onDelete={onSessionDelete}
+                            />
+                          </li>
+                        ))}
+                      </SessionList>
+                    )}
+                  </SessionListWrapper>
+                </>
+              )}
+            </SessionsContainer>
+          </TabsContent>
+
+          <TabsContent value="add">
+            {editMode && (
+              <NodesLibraryContainer>
+                {selectedSessionId ? (
+                  nodeDefinitions.length === 0 ? (
+                    <EmptyStateText>Loading node definitions…</EmptyStateText>
+                  ) : (
+                    <NodePalette
+                      nodeDefinitions={nodeDefinitions}
+                      onDragStart={onDragStart}
+                      pluginKinds={pluginKinds}
+                      pluginTypes={pluginTypes}
+                    />
+                  )
+                ) : (
+                  <EmptyStateText>Select a session to add nodes</EmptyStateText>
+                )}
+              </NodesLibraryContainer>
+            )}
+          </TabsContent>
+        </TabsRoot>
+      </LeftPanelAside>
+    );
+  }
+);

ui/src/components/monitor/Legend.tsx

@@ -0,0 +1,47 @@
+// SPDX-FileCopyrightText: © 2025 StreamKit Contributors
+//
+// SPDX-License-Identifier: MPL-2.0
+
+/**
+ * Node-state legend overlay for the Monitor View canvas.
+ * Memoized to prevent re-renders during node drag.
+ */
+
+import React from 'react';
+
+import {
+  LegendContainer,
+  LegendTitle,
+  LegendItem,
+  LegendDot,
+} from '@/components/monitor/MonitorView.styles';
+
+export const Legend = React.memo(() => (
+  <LegendContainer>
+    <LegendTitle>Node States</LegendTitle>
+    <LegendItem>
+      <LegendDot color="var(--sk-status-initializing)" />
+      <span>Initializing</span>
+    </LegendItem>
+    <LegendItem>
+      <LegendDot color="var(--sk-status-running)" />
+      <span>Running</span>
+    </LegendItem>
+    <LegendItem>
+      <LegendDot color="var(--sk-status-recovering)" />
+      <span>Recovering</span>
+    </LegendItem>
+    <LegendItem>
+      <LegendDot color="var(--sk-status-degraded)" />
+      <span>Degraded</span>
+    </LegendItem>
+    <LegendItem>
+      <LegendDot color="var(--sk-status-failed)" />
+      <span>Failed</span>
+    </LegendItem>
+    <LegendItem>
+      <LegendDot color="var(--sk-status-stopped)" />
+      <span>Stopped</span>
+    </LegendItem>
+  </LegendContainer>
+));