Hub Views

apps/desktop/package.json

@@ -22,6 +22,8 @@
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@react-three/drei": "9.117.0",
+    "@react-three/fiber": "8.17.10",
     "@tiptap/core": "^2.11.5",
     "@tiptap/extension-bold": "^2.11.5",
     "@tiptap/extension-bullet-list": "^2.11.5",
@@ -53,9 +55,12 @@
     "node-pty": "^1.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-reconciler": "0.29.2",
     "react-router-dom": "^7.1.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
+    "@takram/three-clouds": "^0.7.1",
+    "three": "0.160.0",
     "tippy.js": "^6.3.7",
     "turndown": "^7.2.1",
     "zod": "^3.24.4"
@@ -69,6 +74,7 @@
     "@types/node": "^22.10.5",
     "@types/react": "^18.3.14",
     "@types/react-dom": "^18.3.5",
+    "@types/three": "0.160.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "electron": "37",

apps/desktop/src/renderer/src/components/browser/browser-tab-dialog.tsx

@@ -713,7 +713,7 @@ export function BrowserTabDialog({
       <div
         role="dialog"
         aria-modal="true"
-        className="no-drag absolute left-[2.5vw] top-[5vh] flex h-[90vh] max-h-[90vh] w-[95vw] max-w-[95vw] flex-col gap-0 overflow-hidden rounded-xl border bg-background p-0 shadow-lg"
+        className="no-drag absolute inset-4 flex flex-col gap-0 overflow-hidden rounded-xl border bg-background p-0 shadow-lg"
         onMouseDown={(event) => event.stopPropagation()}
         onKeyDown={(event) => event.stopPropagation()}
       >

apps/desktop/src/renderer/src/components/browser/terminal-dialog.tsx

@@ -23,6 +23,7 @@ interface TerminalDialogProps {
   onUpdateConfig: (config: TerminalNodeConfig) => void
   workspaceRootDir?: string
   boardRootDir?: string | null
+  portalContainer?: HTMLElement | null
 }
 
 export function TerminalDialog({
@@ -34,7 +35,8 @@ export function TerminalDialog({
   onUpdateConfig,
   sessionId,
   workspaceRootDir,
-  boardRootDir
+  boardRootDir,
+  portalContainer
 }: TerminalDialogProps): React.ReactElement {
   const termRef = useRef<Terminal | null>(null)
   const fitRef = useRef<FitAddon | null>(null)
@@ -443,6 +445,7 @@ export function TerminalDialog({
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogContent
+        container={portalContainer}
         className="flex h-[80vh] max-w-[90vw] flex-row p-0 gap-0 overflow-hidden [&>button[class*='absolute']]:hidden"
         onPointerDown={(e) => e.stopPropagation()}
         onKeyDown={(e) => e.stopPropagation()}