@@ -153,7 +153,11 @@ export class ProcessViewerViewModel implements ViewModel {
153153 const containerHeight = globalStore . get ( this . containerHeightAtom ) ;
154154 const conn = globalStore . get ( this . connection ) ;
155155 const textSearch = globalStore . get ( this . textSearchAtom ) ;
156+ const connStatus = globalStore . get ( this . connStatus ) ;
156157
158+ if ( ! connStatus ?. connected ) {
159+ return ;
160+ }
157161 const start = Math . max ( 0 , Math . floor ( scrollTop / RowHeight ) - OverscanRows ) ;
158162 const visibleRows = containerHeight > 0 ? Math . ceil ( containerHeight / RowHeight ) : 50 ;
159163 const limit = visibleRows + OverscanRows * 2 ;
@@ -871,6 +875,7 @@ export const ProcessViewerView: React.FC<ViewComponentProps<ProcessViewerViewMod
871875 const [ selectedPid , setSelectedPid ] = jotai . useAtom ( model . selectedPidAtom ) ;
872876 const dataStart = jotai . useAtomValue ( model . dataStartAtom ) ;
873877 const connection = jotai . useAtomValue ( model . connection ) ;
878+ const connStatus = jotai . useAtomValue ( model . connStatus ) ;
874879 const bodyScrollRef = React . useRef < HTMLDivElement > ( null ) ;
875880 const containerRef = React . useRef < HTMLDivElement > ( null ) ;
876881 const [ wide , setWide ] = React . useState ( false ) ;
@@ -976,33 +981,36 @@ export const ProcessViewerView: React.FC<ViewComponentProps<ProcessViewerViewMod
976981
977982 { /* outer h-scroll wrapper */ }
978983 < div className = "flex-1 overflow-x-auto overflow-y-hidden" >
979- { /* inner column — expands to header's natural width, rows match */ }
980- < div className = "flex flex-col h-full min-w-full w-max" >
981- < TableHeader model = { model } sortBy = { sortBy } sortDesc = { sortDesc } platform = { platform } />
982-
983- { /* virtualized rows — same width as header, scrolls vertically */ }
984- < div
985- ref = { bodyScrollRef }
986- className = "flex-1 overflow-y-auto overflow-x-hidden w-full wide-scrollbar"
987- onScroll = { handleScroll }
988- >
989- < div style = { { height : totalHeight , position : "relative" } } >
990- < div style = { { position : "absolute" , top : paddingTop , left : 0 , right : 0 } } >
991- { processes . map ( ( proc ) => (
992- < ProcessRow
993- key = { proc . pid }
994- proc = { proc }
995- hasCpu = { hasCpu }
996- platform = { platform }
997- selected = { selectedPid === proc . pid }
998- onSelect = { handleSelectPid }
999- onContextMenu = { handleContextMenu }
1000- />
1001- ) ) }
984+ { ! connStatus ?. connected ? (
985+ < div className = "flex items-center justify-center h-full text-secondary text-sm" >
986+ Waiting for connection…
987+ </ div >
988+ ) : (
989+ < div className = "flex flex-col h-full min-w-full w-max" >
990+ < TableHeader model = { model } sortBy = { sortBy } sortDesc = { sortDesc } platform = { platform } />
991+ < div
992+ ref = { bodyScrollRef }
993+ className = "flex-1 overflow-y-auto overflow-x-hidden w-full wide-scrollbar"
994+ onScroll = { handleScroll }
995+ >
996+ < div style = { { height : totalHeight , position : "relative" } } >
997+ < div style = { { position : "absolute" , top : paddingTop , left : 0 , right : 0 } } >
998+ { processes . map ( ( proc ) => (
999+ < ProcessRow
1000+ key = { proc . pid }
1001+ proc = { proc }
1002+ hasCpu = { hasCpu }
1003+ platform = { platform }
1004+ selected = { selectedPid === proc . pid }
1005+ onSelect = { handleSelectPid }
1006+ onContextMenu = { handleContextMenu }
1007+ />
1008+ ) ) }
1009+ </ div >
10021010 </ div >
10031011 </ div >
10041012 </ div >
1005- </ div >
1013+ ) }
10061014 </ div >
10071015 < ActionStatusBar model = { model } />
10081016 </ div >
0 commit comments