Give the pulse its own duration, and let the editor fill the screen

The shared duration tokens had been stretched to slow the pulses down, which
also slowed every panel and dock animation and left `motion.ts` out of step
with the CSS. Both are back to 200/300 ms, and the pulses use a new
`--duration-pulse` (500 ms): a message arriving is a signal, not a state
change, and it is the only thing here that should linger. The edge pulse read
its own 300 ms constant, so it now takes the token through `motion.ts` and the
two sides cannot drift again.

The code editor also expands: the same node panel fills the content region
beside the sidebar, the canvas chrome steps aside rather than floating on top,
and the settings above the editor keep a readable width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016WzrvW7rjQbynnhF6pxh6i

frontend/src/components/Flow/FlowEditor.tsx

@@ -121,6 +121,8 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
   const [inspected, setInspected] = useState<InspectedEdge | null>(null)
   const [rebind, setRebind] = useState<Rebind | null>(null)
   const [flowPanelOpen, setFlowPanelOpen] = useState(false)
+  // The editor at full size covers the canvas, so its chrome steps aside.
+  const [editorExpanded, setEditorExpanded] = useState(false)
 
   const issues = detail.issues ?? []
 
@@ -234,7 +236,10 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
 
   const renameMutation = useMutation({
     mutationFn: (newName: string) =>
-      FlowsService.renameFlow({ name: flowName, requestBody: { new_name: newName } }),
+      FlowsService.renameFlow({
+        name: flowName,
+        requestBody: { new_name: newName },
+      }),
     onSuccess: (detail) => {
       queryClient.invalidateQueries({ queryKey: flowKeys.all })
       setFlowPanelOpen(false)
@@ -442,6 +447,7 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
         }}
         onPaneClick={() => {
           setSelectedId(null)
+          setEditorExpanded(false)
           setInspected(null)
         }}
         onEdgeClick={(event, edge) => {
@@ -476,26 +482,30 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
         <Background variant={BackgroundVariant.Dots} gap={24} size={1.5} />
       </ReactFlow>
 
-      <FlowTabs
-        flows={flows.data}
-        active={flowName}
-        saving={saving.isPending}
-      />
+      {editorExpanded ? null : (
+        <FlowTabs
+          flows={flows.data}
+          active={flowName}
+          saving={saving.isPending}
+        />
+      )}
 
-      <FlowDock
-        issues={issues}
-        running={runMutation.isPending}
-        onAddNode={() => setPaletteOpen(true)}
-        onEditFlow={() => {
-          setSelectedId(null)
-          setFlowPanelOpen(true)
-        }}
-        onRun={() => {
-          flush()
-          runMutation.mutate()
-        }}
-        onFocusNode={focusNode}
-      />
+      {editorExpanded ? null : (
+        <FlowDock
+          issues={issues}
+          running={runMutation.isPending}
+          onAddNode={() => setPaletteOpen(true)}
+          onEditFlow={() => {
+            setSelectedId(null)
+            setFlowPanelOpen(true)
+          }}
+          onRun={() => {
+            flush()
+            runMutation.mutate()
+          }}
+          onFocusNode={focusNode}
+        />
+      )}
 
       {definitions.length === 0 ? (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
@@ -534,12 +544,15 @@ function FlowEditorInner({ flowName }: { flowName: string }) {
         flow={flowName}
         nodeTypes={nodeTypeInfo ?? []}
         suggestions={suggestions}
+        expanded={editorExpanded}
+        onToggleExpand={() => setEditorExpanded((wide) => !wide)}
         onChange={updateNode}
         onSaveSource={(code) => {
           if (selected) sourceMutation.mutate({ nodeId: selected.id, code })
         }}
         onClose={() => {
           flush()
+          setEditorExpanded(false)
           setSelectedId(null)
         }}
         onDelete={() => selected && deleteNodes([selected.id])}