fix(frontend): null guards, side-effect-in-render, cleanup fixes

- tabbar: optional-chain ref.current in handleMouseUp find (crash if tab
  ref was null during drag end) and null guard in forEach reset loop
- term: move NlGhostText construction from render body into useMemo to
  avoid side effect in render — prevents double-construction in strict mode
- term: guard connectElemRef.current before ResizeObserver.observe()
- nl-ghost-text: log warn on non-abort AI fetch errors instead of silent drop

Author: PhenixStar

frontend/app/tab/tabbar.tsx

@@ -487,8 +487,8 @@ const TabBar = memo(({ workspace, noTabs }: TabBarProps) => {
         const draggingTab = tabIds[tabIndex];
         const tabWidth = tabWidthRef.current;
         const finalLeftPosition = tabIndex * tabWidth;
-        const ref = tabRefs.current.find((ref) => ref.current.dataset.tabId === draggingTab);
-        if (ref.current) {
+        const ref = tabRefs.current.find((ref) => ref.current?.dataset.tabId === draggingTab);
+        if (ref?.current) {
             ref.current.classList.add("animate");
             ref.current.style.transform = `translate3d(${finalLeftPosition}px,0,0)`;
         }
@@ -498,8 +498,10 @@ const TabBar = memo(({ workspace, noTabs }: TabBarProps) => {
         } else {
             // Reset styles
             tabRefs.current.forEach((ref) => {
-                ref.current.style.zIndex = "0";
-                ref.current.classList.remove("animate");
+                if (ref.current) {
+                    ref.current.style.zIndex = "0";
+                    ref.current.classList.remove("animate");
+                }
             });
             // Reset dragging state
             setDraggingTab(null);

frontend/app/view/term/nl-ghost-text.ts

@@ -196,6 +196,7 @@ export class NlGhostText {
             globalStore.set(this.stateAtom, { visible: true, command: cleaned, loading: false, query });
         } catch (e) {
             if (ctrl.signal.aborted) return;
+            console.warn("[NlGhostText] AI fetch failed:", e);
             globalStore.set(this.stateAtom, { visible: false, command: "", loading: false, query });
         }
     }

frontend/app/view/term/term.tsx

@@ -194,10 +194,9 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
         () => jotai.atom<GhostTextState>({ visible: false, command: "", loading: false, query: "" }),
         []
     );
-    const nlGhostRef = React.useRef<NlGhostText | null>(null);
-    if (nlGhostRef.current == null) {
-        nlGhostRef.current = new NlGhostText(ghostStateAtom);
-    }
+    // useMemo guarantees one instance per component lifetime (no side effect in render body)
+    const nlGhostInst = React.useMemo(() => new NlGhostText(ghostStateAtom), []);
+    const nlGhostRef = React.useRef<NlGhostText>(nlGhostInst);
     let termMode = blockData?.meta?.["term:mode"] ?? "term";
     if (termMode != "term" && termMode != "vdom") {
         termMode = "term";
@@ -363,7 +362,9 @@ const TerminalView = ({ blockId, model }: ViewComponentProps<TermViewModel>) =>
         const rszObs = new ResizeObserver(() => {
             termWrap.handleResize_debounced();
         });
-        rszObs.observe(connectElemRef.current);
+        if (connectElemRef.current) {
+            rszObs.observe(connectElemRef.current);
+        }
         termWrap.onSearchResultsDidChange = (results) => {
             globalStore.set(searchProps.resultsIndex, results.resultIndex);
             globalStore.set(searchProps.resultsCount, results.resultCount);