Merge pull request #4 from devsentient/fix-jupyter-tab

Fix jupyter tab

Author: yijie-shakudo

frontend/src/routes/jupyter-tab.tsx

@@ -7,15 +7,36 @@ function Jupyter() {
 
   // This is a hack to prevent the editor from overflowing
   // Should be removed after revising the parent and containers
+  // Use ResizeObserver to properly track parent width changes
   React.useEffect(() => {
+    let resizeObserver: ResizeObserver | null = null;
+
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // Use contentRect.width for more accurate measurements
+        const { width } = entry.contentRect;
+        if (width > 0) {
+          setParentWidth(width);
+        }
+      }
+    });
+
     if (parentRef.current) {
-      setParentWidth(parentRef.current.offsetWidth);
+      resizeObserver.observe(parentRef.current);
     }
+
+    return () => {
+      resizeObserver?.disconnect();
+    };
   }, []);
 
+  // Provide a fallback width to prevent the editor from being hidden
+  // Use parentWidth if available, otherwise use a large default
+  const maxWidth = parentWidth > 0 ? parentWidth : 9999;
+
   return (
     <div ref={parentRef} className="h-full">
-      <JupyterEditor maxWidth={parentWidth} />
+      <JupyterEditor maxWidth={maxWidth} />
     </div>
   );
 }

frontend/src/services/actions.ts

@@ -11,6 +11,7 @@ import {
 } from "#/types/message";
 import { handleObservationMessage } from "./observations";
 import { appendInput } from "#/state/command-slice";
+import { appendJupyterInput } from "#/state/jupyter-slice";
 import { queryClient } from "#/query-client-config";
 
 export function handleActionMessage(message: ActionMessage) {
@@ -31,6 +32,10 @@ export function handleActionMessage(message: ActionMessage) {
     store.dispatch(appendInput(message.args.command));
   }
 
+  if (message.action === ActionType.RUN_IPYTHON) {
+    store.dispatch(appendJupyterInput(message.args.code));
+  }
+
   if ("args" in message && "security_risk" in message.args) {
     store.dispatch(appendSecurityAnalyzerInput(message));
   }