feat: full screen node

frontend/src/app/canvas/CanvasPage.tsx

@@ -51,6 +51,11 @@ import {
   EmptyTitle,
 } from '@/components/ui/empty'
 import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { ClipboardPaste, FolderOpen, FileStack, CircleDotDashed } from 'lucide-react'
 import { DEFAULT_NODE_STYLE, getDefaultDataForType, getNextNodeId } from '@/lib/flowUtils'
 import {
@@ -58,6 +63,7 @@ import {
   getRegisteredNodeTypesGroupedByClassification,
   getRegisteredNodeTypeIds,
   getDefaultStyle,
+  getNodeType,
   isConnectionAllowed,
 } from '@/lib/nodeRegistry'
 import type { AppNode, AppEdge } from '@/lib/nodeTypes'
@@ -131,6 +137,70 @@ function FlowFitViewOnLoad() {
   return null
 }
 
+type FullscreenNodeOverlayProps = {
+  nodeId: string
+  nodes: AppNode[]
+  onClose: () => void
+}
+
+function FullscreenNodeOverlay({ nodeId, nodes, onClose }: FullscreenNodeOverlayProps) {
+  const open = nodeId != null
+  const node = nodes.find((n) => n.id === nodeId)
+  if (!nodeId) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(isOpen) => { if (!isOpen) onClose() }}>
+      <DialogContent
+        className="max-w-[94vw] w-[94vw] max-h-[90vh] h-[90vh] p-0 gap-0 overflow-hidden flex flex-col border rounded-lg shadow-xl bg-card"
+        aria-describedby={undefined}
+        hideCloseButton
+      >
+        <DialogTitle className="sr-only">Node: {node?.id ?? nodeId}</DialogTitle>
+        {node && node.type && (
+          <FullscreenNodeContent node={node} />
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function FullscreenNodeContent({ node }: { node: AppNode }) {
+  const descriptor = getNodeType(node.type ?? '')
+  const NodeComponent = descriptor?.component as React.ComponentType<{
+    id: string
+    data: Record<string, unknown>
+    type?: string
+    selected?: boolean
+    width?: number
+    height?: number
+  }> | undefined
+  if (!NodeComponent) return null
+
+  const w = typeof window !== 'undefined' ? Math.round(window.innerWidth * 0.94) : 1200
+  const h = typeof window !== 'undefined' ? Math.round(window.innerHeight * 0.9) : 800
+
+  const fullscreenNodeForStore: AppNode = {
+    ...node,
+    position: node.position ?? { x: 0, y: 0 },
+    style: { ...(node.style as object), width: w, height: h },
+  }
+
+  return (
+    <div className="flex-1 min-h-0 overflow-hidden flex">
+      <ReactFlowProvider initialNodes={[fullscreenNodeForStore]} initialEdges={[]}>
+        <NodeComponent
+          id={node.id}
+          data={(node.data as Record<string, unknown>) ?? {}}
+          type={node.type}
+          selected={false}
+          width={w}
+          height={h}
+        />
+      </ReactFlowProvider>
+    </div>
+  )
+}
+
 export type CanvasPageProps = {
   /** Optional project id for future per-project graph loading */
   projectId?: string
@@ -193,6 +263,7 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
   const [isPanning, setIsPanning] = React.useState(false)
   const [isSelecting, setIsSelecting] = React.useState(false)
   const [ariaAnnouncement, setAriaAnnouncement] = React.useState<string | null>(null)
+  const [fullscreenNodeId, setFullscreenNodeId] = React.useState<string | null>(null)
   const nodesRef = useRef(nodes)
   nodesRef.current = nodes
 
@@ -412,6 +483,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
       setConnectionFrom,
       isValidConnection,
       flowActionsRef,
+      fullscreenNodeId,
+      setFullscreenNodeId,
     }),
     [
       nodes,
@@ -424,6 +497,8 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
       setConnectionFrom,
       isValidConnection,
       flowActionsRef,
+      fullscreenNodeId,
+      setFullscreenNodeId,
     ]
   )
 
@@ -707,6 +782,13 @@ export function CanvasPage({ projectId }: CanvasPageProps) {
                 </ContextMenuGroup>
               </ContextMenuContent>
             </ContextMenu>
+            {fullscreenNodeId && (
+              <FullscreenNodeOverlay
+                nodeId={fullscreenNodeId}
+                nodes={nodes}
+                onClose={() => setFullscreenNodeId(null)}
+              />
+            )}
           </FlowContext.Provider>
         </div>
       </div>

frontend/src/components/base/BaseNode.tsx

@@ -122,19 +122,37 @@ export function BaseNodeHeaderRow({
   title,
   right,
   className,
+  onHeaderDoubleClick,
 }: {
   icon: ReactNode;
   title: ReactNode;
   /** Optional right-side content (e.g. type selector). */
   right?: ReactNode;
   className?: string;
+  /** When provided, double-click on the header triggers this (e.g. fullscreen). Header gets cursor-pointer and nodrag. */
+  onHeaderDoubleClick?: () => void;
 }) {
   return (
     <header
+      role={onHeaderDoubleClick ? 'button' : undefined}
+      tabIndex={onHeaderDoubleClick ? 0 : undefined}
+      onDoubleClick={onHeaderDoubleClick}
+      onKeyDown={
+        onHeaderDoubleClick
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onHeaderDoubleClick();
+              }
+            }
+          : undefined
+      }
       className={cn(
         "shrink-0 mx-0 my-0 flex flex-row items-center justify-between gap-2 px-3 py-2",
+        onHeaderDoubleClick && "cursor-pointer",
         className,
       )}
+      title={onHeaderDoubleClick ? 'Double-click for full screen' : undefined}
     >
       {icon}
       <h3

frontend/src/components/base/FlowKeyboardShortcuts.tsx

@@ -80,6 +80,8 @@ export function FlowKeyboardShortcuts() {
   useEffect(() => {
     const onKeyDown = (ev: KeyboardEvent) => {
       if (ev.key === 'Escape') {
+        const openDialog = document.querySelector('[role="dialog"]')
+        if (openDialog && ev.target instanceof Node && openDialog.contains(ev.target)) return
         setConnectionFrom?.(null)
         setNodes?.((nds) => nds.map((n) => ({ ...n, selected: false })))
         ev.preventDefault()

frontend/src/components/nodes/AgentNode.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useContext, useMemo, useState } from 'react'
 import {
   AbstractNodeProps,
   createAbstractNodeComponent,
@@ -15,6 +15,8 @@ import { NodeMenubar } from '@/components/base/NodeMenubar'
 import { NodeFooterEdgeIndicators } from '@/components/base/NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from '@/components/base/NodeHeaderTitle'
 import { InputHandle, OutputHandle } from '@/components/base/NodeHandles'
+import FlowContext from '@/lib/flowContext'
+import { getNodeType } from '@/lib/nodeRegistry'
 import { Button } from '@/components/ui/button'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { Bot, Play, Loader2 } from 'lucide-react'
@@ -51,6 +53,9 @@ function serializeNodeForContext(nodes: { id: string; type?: string; data?: unkn
 }
 
 function AgentNodeComponent({ id, data, width, height, selected }: Props) {
+  const flowContext = useContext(FlowContext)
+  const setFullscreenNodeId = flowContext?.setFullscreenNodeId
+  const supportsFullscreen = getNodeType('agent')?.supportsFullscreen
   const { nodes, sourceIds, updateData } = useAbstractNode<AgentNodeData>(id, data ?? {})
   const { aiConnection } = usePlatform()
   const [running, setRunning] = useState(false)
@@ -137,6 +142,7 @@ function AgentNodeComponent({ id, data, width, height, selected }: Props) {
       <BaseNodeHeaderRow
         icon={<Bot className="size-4" />}
         title={<NodeHeaderTitle nodeId={id} displayTitle={id} />}
+        onHeaderDoubleClick={supportsFullscreen && setFullscreenNodeId ? () => setFullscreenNodeId(id) : undefined}
       />
       <BaseNodeContent>
         <div className="shrink-0 w-full">

frontend/src/components/nodes/ConfigNode.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useContext, useMemo, useRef } from 'react'
 import { autocompletion } from '@codemirror/autocomplete'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
@@ -42,12 +42,17 @@ import { InputHandle, OutputHandle } from '../base/NodeHandles'
 import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
 import { NodeMenubar } from '../base/NodeMenubar'
+import FlowContext from '../../lib/flowContext'
+import { getNodeType } from '../../lib/nodeRegistry'
 
 export type ConfigNodeData = { configType?: ConfigTypeId; content?: string; title?: string; /** @deprecated use content */ plantuml?: string }
 
 type Props = AbstractNodeProps<ConfigNodeData>
 
 function ConfigNodeComponent({ id, data, width, height, selected }: Props) {
+    const flowContext = useContext(FlowContext)
+    const setFullscreenNodeId = flowContext?.setFullscreenNodeId
+    const supportsFullscreen = getNodeType('config')?.supportsFullscreen
     const configTypeId = getConfigTypeId(data ?? {})
     const configType = getConfigType(configTypeId)
     const content = getConfigContent(data ?? {})
@@ -262,6 +267,7 @@ function ConfigNodeComponent({ id, data, width, height, selected }: Props) {
                         </SelectContent>
                     </Select>
                 }
+                onHeaderDoubleClick={supportsFullscreen && setFullscreenNodeId ? () => setFullscreenNodeId(id) : undefined}
             />
 
             <BaseNodeContent>

frontend/src/components/nodes/FunctionNode.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useRef } from 'react'
+import React, { useCallback, useContext, useMemo, useRef } from 'react'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
 import {
@@ -19,6 +19,8 @@ import { InputHandle, OutputHandle } from '../base/NodeHandles'
 import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
 import { NodeMenubar } from '../base/NodeMenubar'
+import FlowContext from '../../lib/flowContext'
+import { getNodeType } from '../../lib/nodeRegistry'
 import { MenubarItem, MenubarShortcut } from '../ui/menubar'
 import { Kbd } from '../ui/kbd'
 import { Code2, Variable } from 'lucide-react'
@@ -28,6 +30,9 @@ export type FunctionNodeData = { body?: string }
 type Props = AbstractNodeProps<FunctionNodeData>
 
 function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
+    const flowContext = useContext(FlowContext)
+    const setFullscreenNodeId = flowContext?.setFullscreenNodeId
+    const supportsFullscreen = getNodeType('function')?.supportsFullscreen
     const bodyValue = data?.body ?? ''
     const { theme } = useTheme()
     const { nodes, sourceIds, updateData } = useAbstractNode<FunctionNodeData>(id, data ?? {})
@@ -92,7 +97,11 @@ function FunctionNodeComponent({ id, data, width, height, selected }: Props) {
 
     return (
         <BaseNode className="min-w-72 min-h-[260px]" dimensions={dimensions} resizable nodeId={id} selected={selected} handles={<><InputHandle id="in" nodeId={id} /><OutputHandle id="out" /></>}>
-            <BaseNodeHeaderRow icon={<Code2 className="size-4" />} title={<NodeHeaderTitle nodeId={id} displayTitle={id} />} />
+            <BaseNodeHeaderRow
+                icon={<Code2 className="size-4" />}
+                title={<NodeHeaderTitle nodeId={id} displayTitle={id} />}
+                onHeaderDoubleClick={supportsFullscreen && setFullscreenNodeId ? () => setFullscreenNodeId(id) : undefined}
+            />
 
             <BaseNodeContent>
                 <div className="shrink-0 w-full">

frontend/src/components/nodes/RenderingNode.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import nunjucks from 'nunjucks'
 import CodeMirror from '@uiw/react-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
@@ -19,7 +19,8 @@ import {
     BaseNodeHeaderRow,
 } from '../base/BaseNode'
 import { getDefaultDataForType, getNextNodeId } from '../../lib/flowUtils'
-import { getDefaultStyle } from '../../lib/nodeRegistry'
+import FlowContext from '../../lib/flowContext'
+import { getDefaultStyle, getNodeType } from '../../lib/nodeRegistry'
 import { NodeFooterEdgeIndicators } from '../base/NodeFooterEdgeIndicators'
 import { NodeHeaderTitle } from '../base/NodeHeaderTitle'
 import { NodeMenubar } from '../base/NodeMenubar'
@@ -47,6 +48,9 @@ type Props = AbstractNodeProps<RenderingNodeData>
 type ViewMode = 'preview' | 'raw'
 
 function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
+    const flowContext = useContext(FlowContext)
+    const setFullscreenNodeId = flowContext?.setFullscreenNodeId
+    const supportsFullscreen = getNodeType('render')?.supportsFullscreen
     const [renderedContent, setRenderedContent] = useState<string | null>(null)
     const [resolvedContent, setResolvedContent] = useState<string | null>(null)
     const [error, setError] = useState<null | { kind: string; message: string }>(null)
@@ -675,6 +679,7 @@ function RenderingNodeComponent({ id, data, width, height, selected }: Props) {
                 <BaseNodeHeaderRow
                     icon={<Sparkles className="size-4" />}
                     title={<NodeHeaderTitle nodeId={id} displayTitle={id} />}
+                    onHeaderDoubleClick={supportsFullscreen && setFullscreenNodeId ? () => setFullscreenNodeId(id) : undefined}
                     right={
                         incomingIds.length > 0 ? (
                             <ToggleGroup

frontend/src/components/ui/dialog.tsx

@@ -29,8 +29,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { hideCloseButton?: boolean }
->(({ className, children, ...props }, ref) => (
+>(({ className, children, hideCloseButton, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -42,10 +42,12 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      {!hideCloseButton && (
-        <X className="h-4 w-4" />
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <span className="sr-only">Close</span>
+          <X className="h-4 w-4" />
-      </DialogPrimitive.Close>
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ))

frontend/src/lib/flowContext.tsx

@@ -22,6 +22,9 @@ export type FlowContextValue = {
     isValidConnection: (connection: Connection) => boolean
     /** Set by FlowKeyboardShortcuts so Node menubar can trigger paste / fit view. */
     flowActionsRef: React.MutableRefObject<FlowActions | null>
+    /** When set, graph centers on this node and a fullscreen dialog shows the node. Cleared on close. */
+    fullscreenNodeId: string | null
+    setFullscreenNodeId: (id: string | null) => void
 }
 
 const FlowContext = React.createContext<FlowContextValue | null>(null)

frontend/src/lib/nodeRegistry.ts

@@ -45,6 +45,8 @@ export type NodeTypeDescriptor = {
   getResetData?: (nodeId?: string) => Record<string, unknown>
   /** Optional: label shown on edge when this type is the target (e.g. "render", "add input"). */
   connectionLabel?: string
+  /** When true, double-clicking the node header opens a fullscreen dialog for this node. */
+  supportsFullscreen?: boolean
 }
 
 const registry = new Map<string, NodeTypeDescriptor>()

frontend/src/lib/registerBuiltinNodes.tsx

@@ -42,6 +42,7 @@ export function registerBuiltinNodes(): void {
       title: nodeId ?? '',
     }),
     connectionLabel: 'adding input',
+    supportsFullscreen: true,
   })
 
   registerNodeType({
@@ -58,6 +59,7 @@ export function registerBuiltinNodes(): void {
     menuLabel: 'Renderer',
     menuIcon: <Sparkles className={ICON_CLASS} />,
     connectionLabel: 'rendering',
+    supportsFullscreen: true,
   })
 
   registerNodeType({
@@ -75,6 +77,7 @@ export function registerBuiltinNodes(): void {
     menuLabel: 'Agent',
     menuIcon: <Bot className={ICON_CLASS} />,
     connectionLabel: 'prompt/context',
+    supportsFullscreen: true,
   })
 
   registerNodeType({
@@ -128,5 +131,6 @@ export function registerBuiltinNodes(): void {
     menuIcon: <Code2 className={ICON_CLASS} />,
     getResetData: () => ({ body: '' }),
     connectionLabel: 'adding input',
+    supportsFullscreen: true,
   })
 }